169

さて、私はこのコードを持っています:

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

そして、選択したオプションの値を取得したいと思います。例: 「オプション 2」が選択され、その値は「2」です。「2」は取得する必要がある値であり、「オプション 2」ではありません。

4

14 に答える 14

298

2020 年 4 月: 古い回答を修正

選択したオプションに対して:selected疑似セレクターを使用し、.val関数を使用してオプションの値を取得します。

$('select[name=selector] option').filter(':selected').val()

補足:selected:最初のクエリでセレクターを直接使用するよりも、フィルターを使用する方が適切です。

変更ハンドラー内の場合は、単にthis.value選択したオプション値を取得するために使用できます。その他のオプションについては、デモを参照してください。

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

古い答え:

編集：多くの人が指摘したように、これは選択されたオプション値を返しません。

~~ .valを使用して、選択したオプションの値を取得します。下記参照、

$('select[name=selector]').val()~~
于 2012-10-26T15:32:45.923 に答える
129

私は自分の経験を共有したかっただけです

私のため、

$('#selectorId').val()

null を返しました。

私は使用しなければならなかった

$('#selectorId option:selected').val()

于 2014-07-16T10:27:11.823 に答える
24 
$('select').change(function() {
    console.log($(this).val())
});​

jsFiddle の例

.val()値を取得します。

于 2012-10-26T15:33:42.337 に答える
10

選択に ID を追加する必要があります。それで：
$('#selectorID').val()

于 2012-10-26T15:32:50.480 に答える
5

jquery次のように使用できます

脚本

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

フィドルはこちら

于 2012-10-26T15:39:53.430 に答える
2

このような選択の場合

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

...次の方法でIDを取得できます：

$('#list-name option:selected').attr('id');

または、代わりに値を使用して、簡単な方法で取得することもできます...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

このような：

$('#list-name').val();
于 2016-06-22T22:37:52.773 に答える