1. ホーム
  2. jquery

[解決済み] jQuery get selected option value (not text, but the attribute 'value') 選択されたオプションの値を取得する。

2022-04-23 03:21:49

質問

さて、こんなコードがあります。

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

そして、選択されたオプションの値を取得したい。 例 'オプション2'が選択されており、その値は'2'である。私が取得する必要があるのは'2'であり、'Option 2'ではありません。

どのように解決するのですか?

04/2020: 古い答えを修正しました

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