JavaScript의 드롭 다운 목록에서 선택한 값을 얻는 방법

Question

JavaScript를 사용하여 드롭 다운 목록에서 선택한 값을 가져 오는 방법은 무엇입니까? 나는 다음을 시도했으나 효과가 없다.

var sel = document.getElementById('select1'); 
var sv = sel.options[sel.selectedIndex].value; 
alert(sv); 

Answer 1

나와 함께 잘 작동합니다.

<div> 
    <select id="select1"> 
     <option value="1">test1</option> 
     <option value="2" selected="selected">test2</option> 
     <option value="3">test3</option> 
    </select> 
    <br/> 
    <button onClick="GetSelectedItem('select1');">Get Selected Item</button> 
</div> 

그리고 다음 자바 스크립트 :

function GetSelectedItem(el) 
{ 
    var e = document.getElementById(el); 
    var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text; 
    alert(strSel); 
} 

이 올바른 ID를 사용하는를 참조

나는 다음과 같은 HTML이있다. ASP.NET과 함께 사용하는 경우,으로 렌더링하면 ID가 변경됩니다.

Answer 2

직접 value는 잘 작동합니다 : 다음 선택 어떤 항목의 selectedIndex -1을 반환하고 코드 나누기가 없을 때 코드가 실패 할 수 있습니다

var sv = sel.value; 
alert(sv); 

유일한 이유입니다.

Answer 3

나는 var sv = sel.options [sel.selectedIndex] .value 변경을 말할 것입니다; ~ var sv = sel.options [sel.selectedIndex] .text;

그것은 나를 위해 일했습니다. 내가 Getting the selected value dropdown jstl

Answer 4

그것이 여기

function GetSelectedItem() 
{ 
    var index = document.getElementById(select1).selectedIndex; 

    alert("value =" + document.getElementById(select1).value); // show selected value 
    alert("text =" + document.getElementById(select1).options[index].text); // show selected text 
} 

Answer 5

을 위해 일하고 희망 내 솔루션을 찾을 곳을 연출하는 것은

먼저 우리가 UI를 설계 자바 스크립트 드롭 다운의 선택된 값을 얻을 수있는 간단한 예입니다 드롭 다운

<div class="col-xs-12"> 
<select class="form-control" id="language"> 
    <option>---SELECT---</option> 
    <option>JAVA</option> 
    <option>C</option> 
    <option>C++</option> 
    <option>PERL</option> 
</select> 

다음으로 우리가 선택한 항목을 얻기 위해 스크립트를 작성해야

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#language').change(function() { 
     var doc = document.getElementById("language"); 
     alert("You selected " + doc.options[doc.selectedIndex].value); 
    }); 
}); 

지금 때 변화 드롭 다운 선택 항목은 경고 할 것이다.

Answer 6

Html5 사양에 따르면 element.options [e.selectedIndex]를 사용해야합니다. 텍스트

아래처럼 선택 상자가있는 경우 :

<select id="selectbox1"> 
    <option value="1">First</option> 
    <option value="2" selected="selected">Second</option> 
    <option value="3">Third</option> 
</select> 
<br/> 
<button onClick="GetItemValue('selectbox1');">Get Item</button> 

당신은 다음과 같은 스크립트를 사용하여 값을 얻을 수 있습니다 :

<script> 
function GetItemValue(q) { 
    var e = document.getElementById(q); 
    var selValue = e.options[e.selectedIndex].text ; 
    alert("Selected Value: "+selValue); 
} 
</script> 

을 시도하고 테스트했다.