jQueryと 'select'タグ

Question

私は<select>タグを持っており、選択したオプションの値を選択する必要があります。 jQueryを使って

<select id="foo"> 
    <option value="1">a</option> 
    <option value="2">b</option> 
    <option value="3">c</option> 
</select> 

私はこのようにそれを行うためにval()メソッドを使用しよう：

$('#foo').val(); 

問題は、それが常に1を返すことである - 選択されたオプションのデフォルト値！

なぜそうですか？

Answer 1

これを試してみてください：この

$('#foo :selected').val(); 

チェック

$("#foo option:selected").val(); 

編集：あなたのセレクタに使用されている属性を使用すると、IDを持つ複数のDOM要素を持っている場合DEMO here

Answer 2

<select>要素にselected属性のオプションが含まれていない場合、最初のオプションがデフォルトとして選択されます。

選択を変更してval()を実行すると、別の値が得られます。

それは

$('#foo').change(function() { 
    console.log($(this).val()); 
}); 

Answer 3

を変更するたびにこれを試してみてください、これを試してみて、それはまだあなたに同じ値を与えるなら、私に教え：

$('#foo').change(function() { 
    console.log($('#foo :selected').val()); 
}).change(); // this change will fire for first time and give the value `1` 

Answer 4

$("select option:selected").each(function() { 
    $(this).val(); 
}); 

Answer 5

これも発生する可能性があります。

jQueryはイベントをすべての要素に正しくバインドしますが、その値を要求するときにDOMの最初のもののみを使用します。