IT系おじさんのチラシの裏
2018年10月~
当サイトの記事にはアフィリエイト広告のリンクが含まれる場合があります

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からプルダウンのデータを引っ張ってくる、なんてことも可能ですしね。

関連記事

JavaScriptのWebAudioAPIで楽曲の口パクをしてみる

以前、ソフトウェアの解説動画を作った際、おっさんの声だけ流れてるのもアレだし、最近流行りのアバターにしゃべらせるやつやってみよう、と思ったことがあります。 vtuberとかおじさんよくわからない

コメント

  • 拝見させて頂いております。OSプルダウンが変更されるたびにstyleのdisplay:none;とdisplay:block;を切り替える方法についてif(document.getElementById('')){}を扱うのは分かるのですが、詳しい使い方が分かりません。ご教授頂けると助かります。
    [返信]
    • 例えば、下記のようOSごとにバージョン情報のプルダウンを用意し、
      <pre>&lt;select id="Windows_ver"&gt;~省略~&lt;/select&gt;
      &lt;select id="Android_ver"&gt;~省略~&lt;/select&gt;
      &lt;select id="iOS_ver"&gt;~省略~&lt;/select&gt;</pre>

      JavaScript側はこんな感じでいかがでしょうか。テストせずに思いつきで書いているのでスペルミス等あったらごめんなさいね。

      <pre>document.getElementsByName('OS')[0].onchange = function () {
      document.getElementById('Windows_ver').style.display = 'none';
      document.getElementById('Android_ver').style.display = 'none';
      document.getElementById('iOS_ver').style.display = 'none';
      if (document.getElementById(this.value+'_ver')) {
      document.getElementById(this.value+'_ver').style.display = 'block';
      }
      }</pre>
      [返信]
      • ご回答ありがとうございます。
        2つを組み合わせたような機能を考えていたので、もう少し深く考えてみます。
        プルダウンメニューで1段階目をクリック後に見えなくしたうえで、2段階目を選択するような機能を考えておりました。
        [返信]
  • 超初心者です。
    ○○かつ○○の場合の選択肢、という二段階の分岐を教えていただけますでしょうか。

    A-1
    A-2

    B-3
    B-4

    ではなく

    A-1
    A-2

    B-1
    B-2

    という風に、二回目の選択肢はAであろうがBであろうが同じ、といったタイプものです。
    その後、

    A-1-あ
    A-2-い
    B-1-う
    B-2-え

    と選択できるようにしたいです。
    分かりづらくて申し訳ありませんが、ご教授いただければと思います。
    [返信]
    • 例えば、下記のような連想配列を用意し、1つ目または2つ目のプルダウンでonchangeが発生するたびに3つ目のプルダウンの中身を入れ替えると良いのではないでしょうか。

      let thirdArray = new Array();
      thirdArray['A-1'] = 'あ';
      thirdArray['A-2'] = 'い';
      thirdArray['B-1'] = 'う';
      thirdArray['B-2'] = 'え';
      [返信]
  • ご回答いただきどうもありがとうございます。
    上記の方法でトライしてみます。
    ご丁寧にありがとうございました。
    [返信]

新しいコメントを投稿する

[新規投稿]
 
TOP