jquery セレクトボックスの選択された値やテキストを取得する方法

値を取得する対象の HTML

サンプルコードで使用する HTML になります。

id を使って、値の取得や設定をしてみたいと思います。

<select id='hogeselect'>
<option value="1">A</option>
<option value="2">B</option>
</select>

select タグのテキストを取得する方法

現在、選択されている値(value)を取得することができます。

$('#hogeselect').val();

select タグのテキストを取得する方法

書き方その１

$('#hogeselect option:selected').text();

書き方その２

$('#hogeselect').children(':selected').text():

どちらの方法でも、結果として選択されているテキストを取得することができます。

この例の場合では、A か B のどちらか選ばれている方が取得できます。

セレクトする場合

逆に jquery で選択させたい場合は、下記のように書くと実現できます。

$('#hogeselect').val("2");

このコードでは、value が 2 の選択肢が選ばれます。