【jQuery】:selectedを使って選択された要素を指定する!

選択された要素を指定するにはjQueryで:selectedを使用します。

:selectedとは選択状態であるoption要素を選択する擬似クラスであり、セレクトメニューで選択された値を指定することができます。

先ほども言いましたが、:selectedはoption要素を選択する擬似クラスであることから、チェックボックスやラジオボタンで選択された値を指定することはできませんので注意してください。

また、:selectedで選択された値にeach()メソッドを使用することで複数の項目の値を一つずつ指定することができます。

今回は、jQueryで:selectedを使って選択された要素を指定する方法について以下の内容で解説していきます。

⚫︎ :selectedを使用する際の注意点

⚫︎ 選択された要素を指定する場合

⚫︎ jQueryを使用せずに選択された要素を指定する場合
⚫︎ 選択された複数の要素を指定する方法

ハルトさん

今回は:selectedを使ってjQueryで選択された要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:selectedとは

:selectedとは選択状態であるoption要素を選択することができる擬似クラスとなります。

:selectedの書き方

:selectedの書き方は下記となります。

$の()に「セレクタ:selected」を指定することで、option要素で選択状態である値を指定することができます。

:selectedを使用する際の注意点

:selectedセレクタは<options>に対してのみ有効です。
その為、下記のようなチェックボックス、ラジオボタンで選択された値を指定することができません。

チェックボックス

1
2
3

ラジオボタン

お肌に効果がなかった
お肌にトラブルがあった
別の商品を使うようになった

もし、チェックボックス、ラジオボタンで選択された値を指定したい場合は「:checked」の擬似クラスを使用してください。

選択された要素を指定するサンプルコード

:selectedで選択された要素を指定するサンプルコードを紹介します。

sample.html

index.js

出力結果

:selectedによってoptionタグで選択された要素を指定することができます。
そのため、ボタンを押すと、セレクタメニューで選択された値が表示されます。

jQueryを使用せずに選択された要素を指定する場合

jQueryを使用せず、純粋なJavaScriptで選択された要素を指定してみます。

sample.html

index.js

出力結果

セレクトメニューで選択した値が表示されていることから、jQueryを使用せずJavaScriptで選択された要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、一つのコードが長くなりますね!
これだとjQueryの方が短いコードで実装できるので便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

選択された複数の要素を指定する方法

選択された複数の要素を指定するにはeach()を使用します。

sample.html

index.js

出力結果

each()でoptionタグ内で選択された複数の要素を指定します。
その為、ボタンを押すと、コンソールに選択した値が全て表示されています。

さとみさん

each()を複数使用することで、選択された複数の要素を指定することができるんですね!
逆にeach()を使わないとどうなるんですか?

ハルトさん

each()を使わずに複数の要素を選択すると、選択した複数の要素が連結されて一つの文字列になってしまいます。
その例がわかるように、サンプルコードを見てみましょう。

sample.html

index.js

出力結果

each()を使わずに複数の値を指定しようとすると、選択した値が連結されて1つの値として指定されます。

さとみさん

確かに、コンソールを見ると、複数の選択した値が1つの値となって出力されていますね!
これだと、取得した値がどれも当てはまらなくなりますね!

ハルトさん

そうですね。
その為、セレクタメニューで複数の値を指定したい場合はeach()を使用するようにしましょう。

今回のポイント

:selectedで選択された要素を指定

⚫︎ jQueryで選択された要素を指定するには似クラスである:selectedを使用する

⚫︎ :selectedはチェックボックスやラジオボタンで選択された値を指定することができない
(使用できるのはoptionタグ)

⚫︎ セレクタを指定せずに最後の子要素を指定すると最後の子要素を認識できず、全体の要素を取得する

⚫︎ 選択された複数の要素を指定するにはeach()メソッドを使用する
(each()メソッド使用せすに指定すると、1つの値として指定される)

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し