こんにちは、大学時代にプログラミングを始め、現在はエンジニアをしているuhablog(ウハブログ)です。
今回の記事ではjQueryでselect boxの値とテキストを取得する方法を紹介します。
この記事を読むことで
- jQueryを使ってselectの値(value)を取得する方法
- jQueryを使ってselectのテキスト(画面表示)の値を取得する方法
がわかります。
ぜひ最後まで読んでいってください。
取得対象のselect box
今回取得する対象となるselect boxとして以下のようなものを準備しました。
このselect boxから値やテキストを取得していきます。
<select id="SelectBox">
<option value="russia">ロシア</option>
<option value="ukraine">ウクライナ</option>
<option value="america">アメリカ</option>
<option value="japan">日本</option>
<option value="china">中国</option>
</select> jQueryでselectの値(value)を取得する
まず選択されているselect boxの値(value)を取得します。
jQueryでselectの値(value)を取得
jQueryで選択されているselectのvalue値を取得するためには以下のようなコードで取得できます。
$('#SelectBox').val();画面でロシアが選択されている場合はvalue値である"russia"が取得され、ウクライナが選択されている場合はvalue値である"ukraine"が取得されます。
'#Selectbox'の箇所を取得したいselect boxのidやclass名に変更することで取得することができます。
selectのテキストを取得する
次にjQueryで選択されているテキストを取得します。
今回の例のselect boxで言うと"ロシア"とか"ウクライナ"みたいな値を取得します。
jQueryでselectのテキストを取得
jQueryで選択されているselectのテキストを取得するためのコードは次のようになります。
$('#SelectBox option:selected').text()注意が必要なのは「option:selected」が必要なことです。
これをつけることで選択されている要素のテキストのみ取得することができます。
例えば、画面でアメリカが選択されている場合は"アメリカ"が取得され、日本が選択されている場合は"日本"が取得されます。
「option:selected」を付けないと対象となるselect boxの全てのテキストが取得されます。
こちらも同じく'#Selectbox'の箇所を取得したいselect boxのidやclass名に変更することで必要なselect boxのテキストを取得することができます。
以上がjQueryでselectの値とテキストを取得する方法となります。