「select要素」とは?select要素の使い方select要素の選択select要素の操作などの基本的な内容から、応用的な使い方に関しても解説していきます。まとめ「select要素」とは?それでは、まず最初に「select要素」についての基本的な知識から学習を進めていきましょう!「select要素」は、一般的にフォーム要素内でユーザーに選択肢を提供する際に使われるHTML要素になります。以下のような選択フォームを見たことがある人も多いのではないでしょうか。上記のようなリストから1つだけ選択肢を選んだり、複数の選択肢を選ぶこともできます。ユーザーが選んだ項目はjQueryから取得してプログラミングに組み込むことができるのです。select要素の書き方からイベント処理・値の取得方法までそれぞれの方法を見ていきましょう。一般的には、「selectタグ」と「optionタグ」の2つを組み合わせることで選択フォームは構成されています。value="4">ロシア</option></select>このサンプルを実行すると、冒頭でご紹介した「選択フォーム」のようになります。「optionタグ」が選択肢を意味しており、「value属性」に値を設定することでユーザーがどの選択肢を選んだのか分かるようになります。今回学習する「select要素」の操作とは、言い換えればユーザーが選んだ「optionタグ」の値を操作すると考えても良いでしょう。changeを使ったイベント処理の実行方法それでは、「select要素」をjQueryから操作するための方法について解説します。一般的に、jQueryからフォーム要素のイベント処理を記述することで制御していくのが簡単です。//ここに処理を記述する})この例では、id属性値が「#area」のselect要素を対象に「change」イベント処理を記述しているのが分かります。このように記述することで、ユーザーが選択肢をクリックした瞬間にイベント処理が実行されることになります。changeイベント処理の中に実行したい処理を記述すれば、ユーザーが何を選択したのかを把握することができるわけです!valueの値を取得する方法それでは、optionタグに付与された「value属性値」を取得してみましょう!ユーザーが選択肢をクリックしたかどうかは「$('option:selected')」というセレクタ指定で判断することが可能です。値を取得するにはjQueryの標準で提供されている「val()」メソッドを使うと簡単です。以下のようなselect要素があるとします。value="3">中国</option></select>このselect要素に対して、ユーザーが選択した値を取得するには次のように記述します。console.log(r);})実行結果1この例では、select要素に対してユーザーが選んだ項目のvalue値を取得しています。ユーザーが「日本」を選択したら実行結果のようにvalue値「1」が出力されるというわけです。ちなみに、「val()」ではなく「text()」メソッドを使うと「日本」というラベル名が取得できるので覚えておきましょう!select要素の選択ここでは、select要素の「選択」についてもう少し詳しく見ていきましょう。選択肢のいずれかを「選択状態」にしておく方法や複数の選択ができるようにするなどの方法について学習します。候補を選択(selected)する方法まずは、事前に選択肢の中から任意の項目を「選択状態」にしておく方法について学びます。前章でselect要素の「値」を取得する際に「val()」メソッドを利用しましたが、実はその逆も可能です!つまり、任意のvalue値をval()メソッドで指定することで、意図的に「選択状態」にすることが可能なのです。次のサンプル例を見てください!$('#area').val(1);この例では、select要素に対してvalue値が「1」の項目を選択状態にするという意味になります。実行すると、以下のようにあらかじめ1番目の項目が選択状態になっているのが分かりますね。複数(multiselect)の候補を選択する方法これまでは、選択肢の中から1つだけしか項目を選べませんでしたが、複数の項目を選ぶように設定することも可能です。--></select>このように「multiple」プロパティを付与するだけで、ユーザーは複数の選択が可能な状態になります。選択肢の中から複数の項目を選んだvalue値を取得する方法を見ていきましょう!今回は、以下のようなselect要素を作ります。value="3">中国</option></select><br><button>ボタン</button>ポイントは、ボタン要素を配置している点です!ユーザーが複数の項目を選択する際は、1つずつ選んでいくはずなので「change」イベントだと値がその都度出力されてしまいます。そこで、選択完了後にボタンをクリックすることでまとめて値を取得すると効率が良いわけです。jQuery側はクリックイベント処理の中に、「val()」メソッドを使った処理を記述します。"3"]例えば、value値が「1」と「3」の項目を選択してからボタンをクリックすると、実行結果のように出力されます。具体的には、選択候補をjQuery側から追加したり削除する方法について詳しく見ていきます。selectタグ内のoption候補を追加する方法まずは、選択候補のoptionタグをjQuery側から追加する方法について見ていきましょう。一般的にselect要素の選択候補はあらかじめ決まっていることが多いですが、jQuery側から意図的に候補を追加することもできます。簡単な方法としては、任意のHTML要素を追加できる「append()」メソッドを使うことです。次のようなselect要素があるとします。value="3">中国</option></select><br><button>ボタン</button>最後にボタン要素を配置しているのが分かりますね。このボタンをクリックすることで、任意のoptionタグを生成&追加できるようにしてみましょう。そこで、ボタンのイベント処理を次のように記述します。value="4">インド</option>');})クリックイベント処理として「click()」を使い、その中に「append()」メソッドを記述しています。append()の引数にoptionタグで選択候補を設定しているのが分かりますね。このように記述することで、ボタンをクリックして「インド」という選択候補を追加できるようになるわけです。次に、選択候補を意図的に削除する方法についても見ていきましょう!選択候補となるoptionタグを削除するには「remove()」メソッドを使うのが簡単です。その削除する対象の要素を限定する必要があることに注意が必要です。関係ないHTML要素を削除しないようにjQueryのセレクタ指定をしっかりと行うことが重要です。$('option:selected').remove();})この例では、クリックイベント処理の中で「remove()」メソッドを実行しているのが分かります。セレクタ指定として「$('option:selected')」のように記述することで、ユーザーが選択した候補に限定しています。ボタンをクリックしたら選択している候補を削除することができるわけです!まとめ今回は、jQueryからselect要素を操作するためのプログラミング手法について学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!select要素の選択された候補のvalue値を取得するには「val()」を使う単数・複数の候補を選択状態にする場合も「val()」が利用できる選択候補の追加は「append()」、削除については「remove()」を使う上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。