【jQuery入門】select要素の選択・取得・追加まとめ!

マサト
書いた人 マサト
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは、ライターのマサトです!

今回は、jQueryから「select要素」を選択したり取得・追加するためのプログラミング手法について学習をしてきいましょう!

この記事では、

・「select要素」とは?
・select要素の使い方

という基本的な内容から、

・select要素の選択
・select要素の操作

などの応用的な使い方に関しても解説していきます。

この記事で、「select要素」の制御方法をしっかり学習して自分のスキルアップを目指しましょう!

「select要素」とは?

それでは、まず最初に「select要素」についての基本的な知識から学習を進めていきましょう!

「select要素」は、一般的にフォーム要素内でユーザーに選択肢を提供する際に使われるHTML要素になります。

例えば、以下のような選択フォームを見たことがある人も多いのではないでしょうか。
jquery-select-img1
上記のようなリストから1つだけ選択肢を選んだり、複数の選択肢を選ぶこともできます。

そして、ユーザーが選んだ項目はjQueryから取得してプログラミングに組み込むことができるのです。

本記事では、この「select要素」をjQueryから操作するための基本から応用技まで詳しく解説していきますのでぜひ参考にしてみてください!

select要素の使い方

ここからは、実際にjQueryからselect要素の値を取得するプログラミング手法について学んでいきます!

まずは、select要素の書き方からイベント処理・値の取得方法までそれぞれの方法を見ていきましょう。

selectタグとoptionタグの書き方

最初に基本的な知識として「select要素」の記述方法をおさらいしておきましょう!

一般的には、「selectタグ」と「optionタグ」の2つを組み合わせることで選択フォームは構成されています。

次のサンプル例を見てください!

このサンプルを実行すると、冒頭でご紹介した「選択フォーム」のようになります。

「optionタグ」が選択肢を意味しており、「value属性」に値を設定することでユーザーがどの選択肢を選んだのか分かるようになります。

今回学習する「select要素」の操作とは、言い換えればユーザーが選んだ「optionタグ」の値を操作すると考えても良いでしょう。

changeを使ったイベント処理の実行方法

それでは、「select要素」をjQueryから操作するための方法について解説します。

一般的に、jQueryからフォーム要素のイベント処理を記述することで制御していくのが簡単です。

そこでよく使われるのが「change」イベントになります!

次のサンプル例を見てください!

この例では、id属性値が「#area」のselect要素を対象に「change」イベント処理を記述しているのが分かります。

このように記述することで、ユーザーが選択肢をクリックした瞬間にイベント処理が実行されることになります。

つまり、changeイベント処理の中に実行したい処理を記述すれば、ユーザーが何を選択したのかを把握することができるわけです!

valueの値を取得する方法

それでは、optionタグに付与された「value属性値」を取得してみましょう!

ユーザーが選択肢をクリックしたかどうかは「$(‘option:selected’)」というセレクタ指定で判断することが可能です。

そして、値を取得するにはjQueryの標準で提供されている「val()」メソッドを使うと簡単です。

まずは以下のようなselect要素があるとします。

このselect要素に対して、ユーザーが選択した値を取得するには次のように記述します。

実行結果

この例では、select要素に対してユーザーが選んだ項目のvalue値を取得しています。

例えば、ユーザーが「日本」を選択したら実行結果のようにvalue値「1」が出力されるというわけです。

ちなみに、「val()」ではなく「text()」メソッドを使うと「日本」というラベル名が取得できるので覚えておきましょう!

select要素の選択

ここでは、select要素の「選択」についてもう少し詳しく見ていきましょう!

あらかじめ選択肢のいずれかを「選択状態」にしておく方法や複数の選択ができるようにするなどの方法について学習します。

候補を選択(selected)する方法

まずは、事前に選択肢の中から任意の項目を「選択状態」にしておく方法について学びます。

前章でselect要素の「値」を取得する際に「val()」メソッドを利用しましたが、実はその逆も可能です!

つまり、任意のvalue値をval()メソッドで指定することで、意図的に「選択状態」にすることが可能なのです。

例えば、次のサンプル例を見てください!

この例では、select要素に対してvalue値が「1」の項目を選択状態にするという意味になります。

実行すると、以下のようにあらかじめ1番目の項目が選択状態になっているのが分かりますね。
jquery-select-img2

複数(multiselect)の候補を選択する方法

これまでは、選択肢の中から1つだけしか項目を選べませんでしたが、複数の項目を選ぶように設定することも可能です。

方法は簡単で「selectタグ」の中に「multiple」プロパティを設定するだけです!

このように「multiple」プロパティを付与するだけで、ユーザーは複数の選択が可能な状態になります。
jquery-select-img3
もちろん、これら複数の値をjQueryから取得したり制御することも可能です!

複数候補の値を取得する方法

選択肢の中から複数の項目を選んだvalue値を取得する方法を見ていきましょう!

今回は、以下のようなselect要素を作ります。

ポイントは、ボタン要素を配置している点です!

ユーザーが複数の項目を選択する際は、1つずつ選んでいくはずなので「change」イベントだと値がその都度出力されてしまいます。

そこで、選択完了後にボタンをクリックすることでまとめて値を取得すると効率が良いわけです。

jQuery側はクリックイベント処理の中に、「val()」メソッドを使った処理を記述します。

実行結果

例えば、value値が「1」と「3」の項目を選択してからボタンをクリックすると、実行結果のように出力されます。

select要素の操作

ここからは、select要素の選択候補を操作するプログラミング手法について学んでいきましょう!

具体的には、選択候補をjQuery側から追加したり削除する方法について詳しく見ていきます。

selectタグ内のoption候補を追加する方法

まずは、選択候補のoptionタグをjQuery側から追加する方法について見ていきましょう。

一般的にselect要素の選択候補はあらかじめ決まっていることが多いですが、jQuery側から意図的に候補を追加することもできます。

最も簡単な方法としては、任意のHTML要素を追加できる「append()」メソッドを使うことです。

例えば、次のようなselect要素があるとします。

最後にボタン要素を配置しているのが分かりますね。

このボタンをクリックすることで、任意のoptionタグを生成&追加できるようにしてみましょう。

そこで、ボタンのイベント処理を次のように記述します。

クリックイベント処理として「click()」を使い、その中に「append()」メソッドを記述しています。

append()の引数にoptionタグで選択候補を設定しているのが分かりますね。

このように記述することで、ボタンをクリックして「インド」という選択候補を追加できるようになるわけです。

ちなみに、append()についてよくわからないという方は、次の記事で基本から応用技までまとめているのでぜひ参考にしてみてください!

selectタグ内のoption候補を削除する方法

次に、選択候補を意図的に削除する方法についても見ていきましょう!

選択候補となるoptionタグを削除するには「remove()」メソッドを使うのが簡単です。

ただし、その削除する対象の要素を限定する必要があることに注意が必要です。

つまり、関係ないHTML要素を削除しないようにjQueryのセレクタ指定をしっかりと行うことが重要です。

次のサンプル例を見てください!

この例では、クリックイベント処理の中で「remove()」メソッドを実行しているのが分かります。

また、セレクタ指定として「$(‘option:selected’)」のように記述することで、ユーザーが選択した候補に限定しています。

つまり、ボタンをクリックしたら選択している候補を削除することができるわけです!

まとめ

今回は、jQueryからselect要素を操作するためのプログラミング手法について学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・select要素の選択された候補のvalue値を取得するには「val()」を使う
・単数・複数の候補を選択状態にする場合も「val()」が利用できる
・選択候補の追加は「append()」、削除については「remove()」を使う

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーランスをされている市川友哉さん。33歳で、プログラミングを学び始め、4ヶ月という短い期間でフリーランスエンジニアとして独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。
疑問や質問などあればお気軽にどうぞ!
お問い合わせフォーム