旅行HOMEjQuery【jQuery】select要素の選択されたoptionテキストを取得する【jQuery】select要素の選択されたoptionテキストを取得する2020.02.08jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、select要素の中からユーザーが選択したoptionのテキストを取得する方法をご紹介しています。select要素に関連する処理の場合、選択されたoptionのvalueを取得して何らかの処理を実行する、というケースは多くあると思います。optionoのvalueによって表示する要素を変えたり、次のステップの選択肢が変わったりなどですね。私も普段はそのように実装していますし、valueによる分岐になるためわかりやすいのでそうしています。いう状態だったため、optionのテキストを取得してほにゃららするというスクリプトを作成しました。具体的には下記のような動きになります。select要素の中からユーザーが選択したoptionテキストが取得できているかと思います。CodePen.本記事の内容select要素を作成する選択されたoptionのテキストを取得する最後にでは、解説していきます。select要素を作成するまずは普段フォームやソート等で使用するselect要素を用意します。下記ではselect要素に「select」というidを持たせています。「selected」というidを持つp要素は選択したoptionのテキスト確認用に記述しています。id="selected"></p>選択されたoptionのテキストを取得する続いて、jQueryでスクリプトを作成していきます。select要素のoptionのvalueを取得するときとは記述が若干異なりますので、その点だけ注意していたいだければと思います。処理内容は下記のようになるかと思います。「:selected」の疑似クラスを持つ要素のテキストを取得テキストをp要素に出力するでは上記の内容でスクリプトを作成してみましょう。});});以上で完了です。最後にいかがでしたでしょうか。select要素の選択されたoptionによって分岐する処理を作成する場合、optionの値を利用することが多いですが、もしvalueが変更になる可能性がある場合はテキストを代用するのも良いかもしれないですね。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。