☰

jQuery 選択されたオプションの値を取得します (テキストではなく、属性 'value') 質問する

tag-icon • tag-icon jquery html html-select
jQuery 選択されたオプションの値を取得します (テキストではなく、属性 'value') 質問する

さて、このコードがあります:

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

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

ベストアンサー1

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

使用:選択済み選択したオプションに疑似セレクターを適用し、.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()~~

おすすめ記事