問題 × 解決策

jQueryでフォームのセレクトボックスで選択されたオプションの値を取得する

問題

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

two + thirteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧