【jQuery】select要素の選択されたoptionテキストを取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、select要素の中からユーザーが選択したoptionのテキストを取得する方法をご紹介しています。

select要素に関連する処理の場合、選択されたoptionのvalueを取得して何らかの処理を実行する、というケースは多くあると思います。optionoのvalueによって表示する要素を変えたり、次のステップの選択肢が変わったりなどですね。私も普段はそのように実装していますし、valueによる分岐になるためわかりやすいのでそうしています。

ただ、現在携わっている案件の場合、バックエンドとフロントエンドがほぼ同時に動いておりまして、optionのvalueが最終的にどのような値になるかわからない、ただoptionのテキストは今のままで大丈夫！　という状態だったため、optionのテキストを取得してほにゃららするというスクリプトを作成しました。

実装する内容

具体的には下記のような動きになります。select要素の中からユーザーが選択したoptionテキストが取得できているかと思います。

See the Pen
Get Selected Option Ttext｜jQuery by ryohei (@intotheprogram)
on CodePen.

では、解説していきます。

select要素を作成する

まずは普段フォームやソート等で使用するselect要素を用意します。

下記ではselect要素に「select」というidを持たせています。「selected」というidを持つp要素は選択したoptionのテキスト確認用に記述しています。

HTML

<select id="select" name="select">
    <option value="1">選択してください</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
    <option value="5">Item 5</option>
</select>
<p id="selected"></p>

選択されたoptionのテキストを取得する

続いて、jQueryでスクリプトを作成していきます。select要素のoptionのvalueを取得するときとは記述が若干異なりますので、その点だけ注意していたいだければと思います。

処理内容は下記のようになるかと思います。

• select要素のchangeイベント発生
• 「:selected」の疑似クラスを持つ要素のテキストを取得
• テキストをp要素に出力する

では上記の内容でスクリプトを作成してみましょう。

JS

$(function(){
    var select = $('#select');
    var selected = $('#selected');

    select.on('change', function(){
        var selectedOptionText = $(this).children(':selected').text();
        
        selected.text(selectedOptionText + 'が選択されました');
    });
});

以上で完了です。

最後に

いかがでしたでしょうか。

select要素の選択されたoptionによって分岐する処理を作成する場合、optionの値を利用することが多いですが、もしvalueが変更になる可能性がある場合はテキストを代用するのも良いかもしれないですね。

以上、jQueryでselect要素の選択されたoptionテキストを取得する方法のご紹介でした！