JavaScriptでプルダウンメニューを複数連動させるなるべく簡単な方法

1つのプルダウンを変更したら、その内容に連動して別のプルダウンを変更するという使い古された手法のお話。

ちょっと検索すればJavaScriptのサンプルが山ほど出てくるかと思いますが、ハードコーディングが多すぎていまいち汎用的ではなかったり、モダンブラウザ全盛の昨今、あまり使いたくないjQueryが前提だったりするため、あらためて投稿しておこうかなぁ、と思い立ち記事を書いています。

コンセプトとしては「jQuery不要」で「そこそこ汎用性がある」書き方にしたつもりです。

プルダウンを連動させるサンプル

実行例

1つ目のプルダウンでOSを選択すると、2つ目のプルダウンにはOSに応じたバージョンが出てくる仕組みです。

JavaScriptサンプル

<select name="OS">
	<option value="">OSを選択</option>
	<option value="Windows">Windows</option>
	<option value="Android">Android</option>
	<option value="iOS">iOS</option>
<select>
<select name="version">
</select>

<script>
let versionArray = new Array();
versionArray[''] = new Array('バージョン情報');
versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10');
versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10');
versionArray['iOS'] = new Array('10以下', '11', '12', '13');

document.getElementsByName('OS')[0].onchange = function () {
	let os = this.value;
	let elm = document.getElementsByName('version')[0];
	elm.options.length = 0;
	for (let i = 0; i < versionArray[os].length; i++) {
		let op = document.createElement('option');
		op.value = versionArray[os][i];
		op.textContent = versionArray[os][i];
		elm.appendChild(op);
	}
};
window.onload = function () {
	document.getElementsByName('OS')[0].onchange();
};
</script>

解説

なるべくシンプル、かつ汎用的にしたつもりですが、どうでしょうかね。

プルダウンの連動はいろんなやり方がありますし、たとえばHTMLタグでの見栄えを重視するなら、バージョン情報のselectタグを複数用意しておき、OSプルダウンが変更されるたびにstyleのdisplay:none;とdisplay:block;を切り替える、なんてのもアリでしょう。

ただ、その場合、selectのname属性が重複してしまうので、GETやPOSTする予定の場合は使いづらくなっちゃいますかね。

そんなわけで、今回はJavaScript内にversionArrayという連想配列を用意し、そこに2つ目のプルダウン情報を書く、という方法にしてみました。

こうして変数を一箇所にまとめておけばメンテナンスが楽ですし、将来的にPHPなどのサーバーサイドスクリプトと連動させる場合にも便利です。

例えばPHPからJavaScriptのコードを出力するのも簡単ですし、より柔軟かつ大量のデータを想定しているなら、XMLHttpRequestでPHPに接続し、JSON形式XML形式でプルダウンのデータを返すことで、リアルタイムにサーバー上のデータを反映する、なんてことも可能でしょう。Ajaxと言ったほうがわかりやすいかな？

ただ、正直言うと見やすさを重視して中途半端でもあります。

だって、せっかくversionArrayにプルダウン情報がすべてまとまっているのだから、1つ目のプルダウンもversionArrayを基にJavaScriptで出力したほうがより一層無駄がないですよね。

でもそうするとJavaScriptコードが長くなって、ウッとなる方もいるかもなので、やや中途半端ですが、見やすさとメンテンナス性のバランスを取ってみました。

まとめ

JavaScriptでプルダウンを連動させるというサンプルはそこら中に転がっていますし、それだけ使われている手法でもあります。

しかしこのプルダウンの連動処理って、意外と前提知識が多く必要でして、

• JavaScriptで連想配列を扱う方法
• id属性ではなくname属性で要素を取得する方法 (getElementsByName)
• 動的に要素を生成する方法 (createElement)
• select要素の中身を空にする方法 (options.length = 0)
• 初回ロード時にselectのchangeイベントを発生させる方法 (window.onloadとonchange();の部分)

というように、JavaScript初心者にとってはなかなか良い例題なんじゃないかなって、個人的には思っています。

先述したとおり、ここから更に発展させてサーバー側のDBからプルダウンのデータを引っ張ってくる、なんてことも可能ですしね。