JavaScriptで複数のプルダウンメニューを連動させる方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで複数のプルダウンメニューを連動させる方法について解説しています。プルダウンメニューの基本の作成方法、項目を選んだときに更に選択肢を表示させる場合の書き方についてサンプルコードで見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで複数のプルダウンメニューを連動させる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
複数のプルダウンメニューを連動させる方法について詳しく説明していくね！
お願いします！
プルダウンメニューとは
プルダウンメニューとは、複数の選択肢の中から1つを選んでもらう際に利用するメニューです。
選択前にはデフォルト状態の選択肢が表示されており、プルダウンメニューをクリックすることによって選択肢一覧が表示され、選択肢の中から1つを選択すると、選択した要素がその後表示され続けるというものです。
webページでは性別を選択してもらうときや、住んでいる県を選択してもらう際によく利用します。
プルダウンメニューの設定方法
プルダウンメニューを配置するにはselectタグで利用し、選択肢をoptionタグで配置していきます。以下は性別を選択するためのプルダウンメニューを配置しています。
<select name="gender"> <option value="">選択してください <option value="0">男性 <option value="1">女性 </select>
このように設定すると選択肢の一番上の要素である”選択して下さい”が選択された状態で表示されますが、以下のようにselected要素を設定することで初期の選択状態を変更することが可能です。
<select name="gender"> <option value="">選択してください <option value="0" selected>男性 <option value="1">女性 </select>
このようにすると”男性”が選択された状態で表示されます。
複数のプルダウンメニューを連動させる方法
複数のプルダウンメニューを連動させたい場合もあるでしょう。例えば、住所を選択するフォームを作成した際に、選択した県によって市の選択肢を変更したい場合などです。
JavaScriptを使えばこういった場合に複数のプルダウンメニューを連動することによって、ある選択肢を選択した際には別のプルダウンメニューに任意の選択肢を表示させることが可能です。
実際に書いてみよう
今回は好きな食べ物を入力してもらうフォームを作成し、食べ物のカテゴリを選ぶとカテゴリにあった食べ物の選択肢が表示されるようなものを作成してみましょう。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>好きな食べ物</title> <script src="script.js"></script> </head> <body> <p>食べ物のジャンル</p> <select name="category" id="category"> <option value="">選択してください</option> <option value="0">和食</option> <option value="1">アジア料理</option> <option value="2">ヨーロッパ料理</option> </select> <p>好きな食べ物</p> <select name="food" id="food"> <option value="">選択してください</option> </select> </body> </html>
script.js
window.onload = function() {
// 好きな食べ物の選択肢
food = document.getElementById("food");
// ジャンルの選択肢が変更された際の動作
category = document.getElementById("category");
category.onchange = changeCategory;
}
// ジャンルの選択肢が変更された際の動作
function changeCategory() {
// 変更後のカテゴリを取得
var changedCategory = category.value;
if (changedCategory == "0") {
// カテゴリに和食が選択された場合
setJFootds();
} else if (changedCategory == "1") {
// カテゴリにアジア料理が選択された場合
setAsianFoods();
} else {
// カテゴリにヨーロッパ料理が選択された場合
setEuropeFoods();
}
}
// 和食の選択肢を設定する
function setJFootds() {
// 好きな食べ物の選択肢を空にする
food.textContent = null;
// 和食の選択肢
var jFoods = [
{cd:"", label:"選択して下さい"},
{cd:"0", label:"寿司"},
{cd:"1", label:"おでん"},
{cd:"2", label:"そば"}
];
jFoods.forEach(function(value) {
var op = document.createElement("option");
op.value = value.cd;
op.text = value.label;
food.appendChild(op);
});
}
// アジア料理の選択肢を設定する
function setAsianFoods() {
// 好きな食べ物の選択肢を空にする
food.textContent = null;
// アジア料理の選択肢
var asianFoods = [
{cd:"", label:"選択して下さい"},
{cd:"3", label:"インドネシア料理"},
{cd:"4", label:"ベトナム料理"},
{cd:"5", label:"インド料理"}
];
asianFoods.forEach(function(value) {
var op = document.createElement("option");
op.value = value.cd;
op.text = value.label;
food.appendChild(op);
});
}
// ヨーロッパ料理の選択肢を設定する
function setEuropeFoods() {
// 好きな食べ物の選択肢を空にする
food.textContent = null;
// ヨーロッパ料理の選択肢
var europeFoods = [
{cd:"", label:"選択して下さい"},
{cd:"6", label:"イタリア料理"},
{cd:"7", label:"カリフォルニア料理"},
{cd:"8", label:"モロッコ料理"}
];
europeFoods.forEach(function(value) {
var op = document.createElement("option");
op.value = value.cd;
op.text = value.label;
food.appendChild(op);
});
}
それでは、ソースコードの解説を行っていきます。
まずindex.htmlですが、食べ物のジャンルのセレクトボックスと好きな食べ物のセレクトボックスを配置しています。好きな食べ物のセレクトボックスの選択肢は食べ物のジャンルが選択された際にjavascriptにて追加していくので初期状態の選択肢のみ用意しておきます。
次にscript.jsの解説です。window.onloadにhtmlが読み込み終わった際に行われる動作を設定していきます。ここでは選択肢をプログラム上で操作するためにdocument.getElementByIdで各セレクトボックスを取得しています。
また、食べ物のジャンルが変更された際にchangeCategory()関数が呼ばれるよう設定しています。changeCategory()関数では、選択された選択肢によって好きな食べ物のセレクトボックスの中身を入れ替えています。
実際の入れ替え処理はsetJFoods()、setAsianFoods()、setEuropeFoods()の各関数内で行っています。入れ替え処理用の各関数内で行っている処理の流れはすべて同じで、選択肢要素の配列を作成、選択肢の数だけ好きな食べ物のセレクトボックスに追加という処理を行っています。
いかがでしたでしょうか、このようにJavaScriptを使うことによってhtml上の要素を自由に操作することができます。今回の記事を参考にぜひいろいろな動作の実現にチャレンジしてみてください！
監修してくれたメンター
| 黒木一志（くろきかつし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
