JavaScriptのドロップダウンリストから選択した値を取得する方法

Question

JavaScriptを使用してドロップダウンリストから選択した値を取得するにはどうすればよいですか？私は以下を試しましたが、うまくいきません。

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

Answer 1

私はうまく動作しています。

私は、次のHTMLを持っている：

<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> 

そして、次のJavaScript：

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を使用しているを参照してください。 ASP.NETで使用している場合は、のIDが変更されます。

Answer 2

直接valueはうまく動作するはずです：その後、何の項目選択、selectedIndex -1を返すと、コードブレークがない場合、あなたのコードが失敗する可能性があります

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

唯一の理由です。

Answer 3

私はchange 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を設計するJavaScriptのドロップダウンの選択された値を取得するための簡単な例でありますドロップダウン

<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> 

を試してみましたが、テストしました。