問題
jQueryでフォームのセレクトボックスで選択されたオプションの値を取得するには？
解決策
「$("form select option:selected").text()」で選択されたオプションの値を取得することができます。
選択されたオプションの値を取得する
jQueryでフォームのセレクトボックスで選択されたオプションの値を取得する方法をご紹介します。
DEMOはこちら
フォームの作成
まず、フォームの作成を行います。
HTML
<form action="" method="post" class="select">
<p class="ta_center">
<select name="selectitem">
<option value="num01">項目01</option>
<option value="num02">項目02</option>
<option value="num03">項目03</option>
<option value="num04">項目04</option>
<option value="num05">項目05</option>
</select>
</p>
<p class="formbottom"><input type="button" value="選択した項目をアラートで表示" class="btns"></p>
</form>セレクトボックスで選択されたオプションの値を表示する記述例
セレクトボックスで選択されたオプションの値をアラートで表示する記述例は以下となります。
$("form.select input[type='button']").click(function(){
alert( $("form.select select option:selected").text() );
});ポイント!
- 「$(“form select option:selected”).text()」を行うことで、選択されたオプションの値を取得することができます。
参照
以下のサイトが、より詳しく解説してくれています。
【【jQuery】セレクトボックスの選択要素を抽出】
https://qiita.com/tomcky/items/8f1868f1fb963732de39
コメント