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

2017.9.7

値を取得する対象のHTML

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

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

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

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

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

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

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

書き方その1

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

書き方その2

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

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

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

セレクトする場合

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

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

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