JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでセレクトボックスの値を動的に生成する方法について現役エンジニアが解説しています。セレクトボックスは複数の選択肢から1つ選ぶHTMLタグになります。JavaScriptで条件によって、セレクトボックスを動的に生成する方法を解説します。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
JavaScriptでセレクトボックスの値を動的に生成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでセレクトボックスの値を動的に生成する方法について詳しく説明していくね！
お願いします！
セレクトボックスとは
入力画面などで選択を行う下記のような部品です。
セレクトボックスの値の設定方法
HTMLのselectタグの中にoptionタグで値を記述していきます。先程のセレクトボックスの画像の例だと下記のように3つのoptionタグが書かれています。
<select name="genre" id="genre"> <option value="JapaneseFoods">和食</option> <option value="ChineseFoods">中華</option> <option value="ItalianFoods">イタリアン</option> </select>
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
セレクトボックスの値を動的に生成する方法
JavaScriptでselectタグを取得して、optionタグを追加することで実現できます。
例えば、誕生月を選択するセレクトボックスでは1月-12月まで12個のoptionタグを記述しますが、HTMLではselectタグのみ記述して、Javascriptのループ処理で12個のoptionタグを生成（追加）することができます。
とはいえ、今の例ではHTMLに静的にoptionタグを書いたのと動作は変わらず動的にするメリットが感じられません。動的にするメリットは、状況によって次の選択肢を変更する場合に効果を発揮します。
冒頭のセレクトボックスの場合だと、選んだジャンルによって次の選択できるメニューを変えるようなときに動的な生成が必要になります。例えば趣味のアンケートで音楽を選んだ際に、次に洋楽やHIP-HOPといった前の質問を受けて選択できる内容を変えることが可能です。
こういったことをする必要がある際は、動的な生成が必要になります。
実際に書いてみよう
誕生月を選択するケースを書いてみます。JavaScriptで12個のoptionタグを追加するだけです。HTMLソースに下記のようにselectタグのみを記述し、JavaScriptからのアクセス用にidに「month」という名前をつけています。
<select name="month" id="month"></select>
次にJavaScriptです。
let month = document.getElementById('month');
document.createElement('option')
for(let i = 1; i <= 12; i++){
let option = document.createElement('option');
option.setAttribute('value', i);
option.innerHTML = i + '月';
month.appendChild(option);
};
- 「ocument.getElementById(‘month’)」にてHTMLのselectタグを取得しています
- 「document.createElement(‘option’)」にてHTMLのoptionを生成しています。（この時点ではselectタグに追加されてない単独のoptionタグです）
- 「option.setAttribute(‘value’, i)」にて、optionタグのvalueを追加しています
- 「option.innerHTML = i + ‘月’」にて、optionタグの表示するテキストの○月を追加しています
- 「month.appendChild(option)」にて、selectタグに生成したoptionを追加しています
このoptionの追加をforループで1~12までの12回繰り返して、12個のoptionタグをHTMLに記述したのと同じ動きになります。
選択した値によって動的にセレクトボックスの値を生成してみよう
冒頭の例で使った料理のジャンルを選択するセレクトボックスを使って、2つ目のセレクトボックスに選択したジャンルのメニューを設定してみます。
完成した動作は下記のような形になります。
まずはHTMLソースです。
- 2つのセレクトボックスがあります
- ジャンルのセレクトボックスとと料理のセレクトボックスです
- ジャンルのセレクトボックスは「onchange=”createMenu(this.value)”」にて、選択をする度にJavaScriptのcreateMenuという関数を呼び出します
- また関数を呼び出す際に選択した値を「this.value」にて渡しています
- 料理のセレクトボックスは「disabled」を設定し、選択ができないようになっています。またoptionタグに料理名は入っていません
- ジャンルを選択したときにcreateMenuという関数で、料理名の追加とdisabledを解除（選択できるようにする）をしています
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<select name="genre" id="genre" onchange="createMenu(this.value)">
<option disabled selected>ジャンルを選択してください</option>
<option value="japaneseFoods">和食</option>
<option value="chineseFoods">中華</option>
<option value="italianFoods">イタリアン</option>
</select>
<select name="menuList" id="menuList" disabled>
<option disabled selected>料理を選択してください</option>
</select>
</body>
</html>
次にJavaScriptのソースです。
const foodMenu =
{
"japaneseFoods": ["寿司", "天ぷら", "おでん"],
"chineseFoods": ["八宝菜", "麻婆豆腐", "エビチリ"],
"italianFoods": ["パスタ", "ピザ", "ミネストローネ"]
};
function createMenu(selectGenre){
let menuList = document.getElementById('menuList');
menuList.disabled = false;
menuList.innerHTML = '';
let option = document.createElement('option');
option.innerHTML = '料理を選択してください';
option.defaultSelected = true;
option.disabled = true;
menuList.appendChild(option);
foodMenu[selectGenre].forEach( menu => {
let option = document.createElement('option');
option.innerHTML = menu;
menuList.appendChild(option);
});
}
初めに「const foodMenu」にジャンルをキーにした料理名のデータを配列で記述しています。キーのjapaneseFoodsなどがHTMLのジャンルのセレクトボックスの値と同じにしていることで、選択したジャンルに対応した料理の名前を引き出せます。
次にcreateMenu関数の処理を説明します。
- 「menuList.disabled = false」にて、メニューのセレクトボックスが活性（選択できる）になります
- 「menuList.innerHTML = “」にて、メニューのセレクトボックスを空にしています
- これによりジャンルが選択されるたびに、新しく料理名を設定できます
optionタグは、「料理を選択してください」というメッセージのみを作成してセレクトボックスに追加しています。このoptionタグの追加処理を料理名の数だけ記述しても良いのですが、記述が多くなり大変です。料理に変更や追加があった際にも大変です。
そこで、JavaScriptの最初に用意したデータの「foodMenu」を使います。「foodMenu[selectGenre]」とすることで、選択したジャンルに紐づく料理名の配列が取得できます。
後はforEachでループさせてoptionの追加を行っています。
まとめ
下記の3つの手順でセレクトボックスの値の追加はできることが確認できたかと思います。
- optionタグを作る
- 値と表示するテキストを追加する
- selectタグにくっつける。
後はサンプルコードのように条件や追加するデータを用意することで、できることがぐっと広がりますのでお試しください。
筆者プロフィール
| メンターTKさん
大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。 その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
