[解決済み] 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()~~
関連
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] jQuery ドロップダウンから選択されたオプションを取得する
-
[解決済み] jQuery get specific option tag text
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jquery mobileでページ中央のグリッド表示
-
[解決済み] jquery - is not a function エラー
-
[解決済み] セレクトした要素の外側のHTMLを取得する
-
[解決済み] jQuery hasAttrで要素に属性があるかどうかをチェックする【重複あり
-
[解決済み] val()を使ってselectの値を設定しても、jqueryのchangeイベントが発生しないのはなぜですか?
-
[解決済み] jQueryを使用してDropDownListの値を設定するにはどうすればよいですか?
-
[解決済み] jQuery: outer html() [重複]。
-
[解決済み] jQuery / JavaScriptでJSONデータをパースする方法は?
-
[解決済み] jQuery append() - 追記された要素を返す
-
[解決済み] jQueryを使用して文字列から最後の文字を削除する方法は?