小粋空間  -  a cheap joke and a play on words site

jQueryでセレクトボックス（プルダウンメニュー）のテキストを取得する

jQueryでセレクトボックス（プルダウンメニュー）のテキストを取得する方法を紹介します。

１．問題点

次のようなセレクトボックス（プルダウンメニュー）を用意します。

HTML

<select id="foo" name="foo">
  <option value="aaa">xxx</option>
  <option value="bbb">yyy</option>
  <option value="ccc">zzz</option>
</select>

jQueryを使ってセレクトボックスを変更したときに値「aaa」「bbb」「ccc」を取得するには、次のように記述します。

jQuery(function() {
    jQuery('#foo').change(function(){
        var data = jQuery(this).val();
        alert('セレクトボックスの値は「' + data + '」です');
    });
});

ただし、セレクトボックスを変更したときに、テキスト「xxx」「yyy」「zzz」を取得する場合、上記のサンプルにある「val()」を「text()」に変更しただけでは取得することはできません。

…前略…
        var data = jQuery(this).text();
…後略…

２．セレクトボックスのテキストを取得する

セレクトボックスのテキストを取得するには、text()の前に「:selected」を加えます。

jQuery(function() {
    jQuery('#foo').change(function(){
        var data = jQuery(this + ':selected').text();
        alert('セレクトボックスのテキストは「' + data + '」です');
    });
});

find()を使った方法でも取得できます。

…前略…
        var data = jQuery(this).find(':selected').text();
…後略…