JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでセレクトボックスの値を動的に生成する方法について現役エンジニアが解説しています。セレクトボックスは複数の選択肢から1つ選ぶHTMLタグになります。JavaScriptで条件によって、セレクトボックスを動的に生成する方法を解説します。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
監修してくれたメンター
高田 悠
JavaScriptでセレクトボックスの値を動的に生成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
- セレクトボックスとは
- セレクトボックスの値とは
- セレクトボックスの値の設定方法
- 「セレクトボックスの値を動的に生成する」とは
- セレクトボックスの値を動的に生成する方法
- 実際に書いてみよう
- まとめ
- 執筆してくれたメンター
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでセレクトボックスの値を動的に生成する方法について詳しく説明していくね！
お願いします！
セレクトボックスとは
入力画面などで選択を行う下記のような部品です。
セレクトボックスの値とは
セレクトボックスの値とは、セレクトボックスの選択肢のことです。
上記の例では、「和食」「中華」「イタリアン」のそれぞれが「セレクトボックスの値」です。
セレクトボックスの値の設定方法
HTMLのselectタグの中にoptionタグで値を記述していきます。
先程のセレクトボックスの画像の例では、下記のように3つのoptionタグが書かれています。
なお、ここで日本語の「和食」「中華」「イタリアン」はあくまでユーザー向けの表示です。
実際に内部で値として登録されるのはoptionタグのvalueである”JapaneseFood” “ChineseFood” “ItalianFood”です。
<select name="genre" id="genre"> <option value="JapaneseFood">和食</option> <option value="ChineseFood">中華</option> <option value="ItalianFood">イタリアン</option> </select>
「セレクトボックスの値を動的に生成する」とは
そもそも「セレクトボックスの値を動的に生成する」とはなんでしょうか。
さきほどの和食・中華・イタリアンの例では、最初からHTMLに3つの値が設定されていますが、これは「静的に生成されている」といいます。
これに対して「動的に生成する」とは、JavaScriptを用いて、その時の状況に応じてあとから値を追加することをいいます。
例えば、先ほどのセレクトボックスで和食を選んだ場合には「天ぷら」「寿司」を、中華を選んだ場合は「炒飯」「エビチリ」を選択肢として提示したい場合、ユーザーの選択に応じて「動的に」次のセレクトボックスの値を生成する必要が出てきますね。
このような実装については、本記事後半の「実際に書いてみよう」で解説しています！
まずは、具体的に値を動的に追加する方法を見ていきましょう。
セレクトボックスの値を動的に生成する方法
JavaScriptでselectタグを取得して、optionタグを追加することで実現できます。
下記のコードでは、セレクトボックスに「天ぷら」という値を追加しています。
HTML
<select name="food-name" id="food-name"> </select>
JavaScript
//select要素を取得する
const selectFoodName = document.getElementById('food-name');
//option要素を新しく作る
const option1 = document.createElement('option');
//option要素にvalueと表示名を設定
option1.value = "tempura";
option1.textContent = "天ぷら";
//select要素にoption要素を追加する
selectFoodName.appendChild(option1)
最終的なHTML
<select name="food-name" id="food-name"> <option value="tempura">天ぷら</option> </select>
実際に書いてみよう
選択した値によって動的にセレクトボックスの値を生成してみよう
それではいよいよ実践的な実装をしていきましょう！
100%理解するのが難しかったとしても、「こんな風に活用できるのか」とイメージするだけでも有意義ですので、ぜひ読み進めてみてください。
冒頭の例で使った料理のジャンルを選択するセレクトボックスを使って、2つめのセレクトボックスに選択したジャンルのメニューを設定してみます。
完成した動作は下記のような形になります。
和食を選んだ場合と中華を選んだ場合で、右側のセレクトボックスの選択肢が変わっていますね。
まずはHTMLソースです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <!-- 1つめのセレクトボックス。これは静的に生成されている（最初から内容が決まっている） --> <select name="genre" id="genre"> <option disabled selected>ジャンルを選択してください</option> <option value="japaneseFoods">和食</option> <option value="chineseFoods">中華</option> <option value="italianFoods">イタリアン</option> </select> <!-- 2つめのセレクトボックス。1つめで選んだジャンルに応じて、動的に選択肢を追加する --> <select name="food-name" id="food-name" disabled> <option disabled selected>料理を選択してください</option> </select> </body> </html>
ここで2つめのセレクトボックスに「料理を選択してください」という値が追加されています。
これは見出しのような役割を持っていて、disabled属性を指定することで内部的には無効な値として扱われます。
次にJavaScriptのソースです。
コメントの後ろに[1]から[4]までの番号が振ってあり、その順番でコードを目で追うと理解しやすくなります。
//料理ジャンルの値と、それに対応するメニュー一覧を格納しておく -- [1]
const foodMenu =
{
"japaneseFoods": ["寿司", "天ぷら", "おでん"],
"chineseFoods": ["八宝菜", "麻婆豆腐", "エビチリ"],
"italianFoods": ["パスタ", "ピザ", "ミネストローネ"]
};
//選択されたジャンルを受け取って処理をする -- [4]
const setMenuOptions(selectedGenre){
const selectFoodName = document.getElementById('food-name'); //2つめのセレクトボックスを取得し
menuList.disabled = false; //選択可能な状態にする
//選択されたジャンルのメニュー一覧に対して処理をする
foodMenu[selectedGenre].forEach((menu, index) => {
const option = document.createElement('option'); //option要素を新しく作る
option.value = index; //option要素の値に、メニューを識別できる番号を指定する
option.innerHTML = menu; //ユーザー向けの表示としてメニュー名を指定する
selectFoodName.appendChild(option); //セレクトボックスにoption要素を追加する
});
}
//ジャンルを選ぶためのセレクトボックスを指定 -- [2]
const genreSelect = document.getElementById('genre');
//なんらかのジャンルが選択されたら（change）、処理を行う -- [3]
genreSelect.addEventListener('change', (e) => {
setMenuOptions(e.target.value); //選択された料理ジャンルを引数として関数に渡す
//※e.target.valueはgenreSelectで選択された値
})
少し長いコードでしたが、「ジャンルに対応したメニュー一覧を用意しておき、ユーザーがジャンルを選択したらそれに対応するメニューのoption要素を作る」という流れがおさえられればバッチリです！
まとめ
セレクトボックスの値を動的に追加するための主な実装は以下の流れです。
- optionタグを作る
- 値と表示するテキストを追加する
- selectタグ内に追加する。
この基本の実装に条件分岐などを組み合わせることで、実現したい要件に沿った実装が可能になります！
今回の解説は以上です。
執筆してくれたメンター
| 高田悠（たかだゆう）
JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。 |
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
