【HTML】複数のプルダウンを連動させる方法とは？JavaScriptのコードも徹底解説

HTMLで、複数のプルダウンメニューを連動させたいと思っていませんか？

1つの選択肢を選んだときに、選択肢によってもう片方の選択肢が変わるようなものが作成できれば、より詳細なアンケートを取ることができますよね。

今回は、連動したプルダウンメニューを実装したいという方のために、

以上の項目に沿って、解説していきますね。

複数のプルダウンメニューを連動させるには、HTMLだけでなく、プログラムのJavaScriptを使用します。

この記事を読めば、HTML・JavaScriptを使ったプルダウンメニューを連動させる方法がわかるようになりますよ。

ぜひ最後まで読んでくださいね！

プルダウンメニューとは何か？

プルダウンメニューは、入力要素の1つで、select要素とoption要素を組み合わせて作成します。

初め、ボックスの中にはデフォルトの選択肢が表示されており、クリックするとメニュー一覧が現れ、そこからメニューを1つ選択できるようになっています。

出身地や好きな食べ物など、複数の選択肢から回答を得たいときに利用します。

<select name="prefecture">
  <option value="">選択してください
  <option value="0">東京都
  <option value="1">大阪府
  <option value="2">京都府
  <option value="3">愛知県
</select>

上記のコードでは、「選択してください」がデフォルトで表示されています。

クリックするとメニュー一覧が現れ、1つ選ぶことができます。選択した後は、その項目が表示され続けます。

selectedを指定することで、特定の要素をデフォルトにすることができます。

<select name="prefecture">
  <option value="">選択してください
  <option value="0">東京都
  <option value="1" selected>大阪府
  <option value="2">京都府
  <option value="3">愛知県
</select>

上記では、「大阪」が選択された状態になります。

複数のプルダウンを連動させるには？

このプルダウンメニューを連動させたい場合があるかと思います。

例えば、前述の選択肢で都道府県を選択した後に、選択肢に応じた市町村を次のメニュー一覧に表示させたいときなどです。

HTML・CSSのみでは、こういった連動はできないため、プログラムを使用する必要があります。

今回は、JavaScriptを使う方法とJavaScriptライブラリのjQueryを使う方法を、それぞれ紹介していきますね。

JavaScriptを使う

まず、JavaScriptを使う方法を紹介します。

初めにHTMLで2つのプルダウンメニューを作成します。

1つ目のメニューの選択次第で2つ目のメニュー一覧を変更したいので、2つ目にはoption要素を1つだけ入れておきます。

<select id="prefecture">
  <option value="">選択してください
  <option value="tokyo">東京都
  <option value="osaka">大阪府
  <option value="kyoto">京都府
  <option value="aichi">愛知県
</select>
<select id="city">
  <option value="">選択してください</option>
</select>

JavaScriptでプルダウン連動を実装します。

var array = new Array();
array[''] = new Array({cd:"0", label:"選択してください"});
array["tokyo"] = new Array(
  {cd:"1", label:"世田谷区"},
  {cd:"2", label:"練馬区"},
  {cd:"3", label:"太田区"},
  {cd:"4", label:"足立区"},
  {cd:"5", label:"江戸川区"}
);
array["osaka"] = [
  {cd:"1", label:"大阪市"},
  {cd:"2", label:"堺市"},
  {cd:"3", label:"東大阪市"},
  {cd:"4", label:"枚方市"},
  {cd:"5", label:"豊中市"}
];
array["kyoto"] = [
  {cd:"1", label:"京都市"},
  {cd:"2", label:"宇治市"},
  {cd:"3", label:"亀岡市"},
  {cd:"4", label:"舞鶴市"},
  {cd:"5", label:"城陽市"}
];
array["aichi"] = [
  {cd:"1", label:"名古屋市"},
  {cd:"2", label:"豊田市"},
  {cd:"3", label:"一宮市"},
  {cd:"4", label:"豊橋市"},
  {cd:"5", label:"岡崎市"}
];

document.getElementById('prefecture').onchange = function(){
  city = document.getElementById("city");
  city.options.length = 0
  var changedPref = prefecture.value;
  for (let i = 0; i < array[changedPref].length; i++) {
    var op = document.createElement("option");
    value = array[changedPref][i]
    op.value = value.cd;
    op.text = value.label;
    city.appendChild(op);
  }
}

document.getElementById(ID)で、指定したidの要素を取得します。

この要素に変更があったときに処理を実行したいので、onchangeを付けて、関数の中身を記述していきます。

次にidがcityの要素を取得し、option要素の数を0にリセットさせてから、新しくoption要素を足していきましょう。

option要素の中身は、該当するリストから取得します。

リストは、prefectureのselect要素から取得したvalue属性の値と同じ名前のものです。

例えば、取得したvalue属性が「tokyo」であれば、JavaScriptの中で使用するリストは、array[“tokyo”]になりますね。

「cd:」に書かれたものがvalue属性の値になり、「label:」に書かれたものがテキストとして表示されます。

リストの数だけoption要素が作られ、これが2つ目のプルダウンメニューになります。

実際にコードを書いて、試してみてくださいね。

jQueryを使う

続いて、jQueryを使った方法を紹介します。

jQueryは、JavaScriptライブラリの1つで、多くのWebサイトで使われています。

JavaScriptのコードを使いやすくするためにまとめたもので、より少ない記述でプログラムを実行することができます。

jQueryのファイルをダウンロードするか、headの中で呼び出して利用することができます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTMLは、下記になります。

今度は、2つ目のリストにすべての選択肢を記述しました。

<select id="prefecture">
  <option value="">選択してください
  <option value="tokyo">東京都
  <option value="osaka">大阪府
  <option value="kyoto">京都府
  <option value="aichi">愛知県
</select>
<select id="city">
  <option value="">選択してください</option>
  <option value="世田谷区" data-val="tokyo">世田谷区</option>
  <option value="練馬区" data-val="tokyo">練馬区</option>
  <option value="太田区" data-val="tokyo">太田区</option>
  <option value="足立区" data-val="tokyo">足立区</option>
  <option value="江戸川区" data-val="tokyo">江戸川区</option>
  <option value="大阪市" data-val="osaka">大阪市</option>
  <option value="堺市" data-val="osaka">堺市</option>
  <option value="東大阪市" data-val="osaka">東大阪市</option>
  <option value="枚方市" data-val="osaka">枚方市</option>
  <option value="豊中市" data-val="osaka">豊中市</option>
  <option value="京都市" data-val="kyoto">京都市</option>
  <option value="宇治市" data-val="kyoto">宇治市</option>
  <option value="亀岡市" data-val="kyoto">亀岡市</option>
  <option value="舞鶴市" data-val="kyoto">舞鶴市</option>
  <option value="城陽市" data-val="kyoto">城陽市</option>
  <option value="名古屋市" data-val="aichi">名古屋市</option>
  <option value="豊田市" data-val="aichi">豊田市</option>
  <option value="一宮市" data-val="aichi">一宮市</option>
  <option value="豊橋市" data-val="aichi">豊橋市</option>
  <option value="岡崎市" data-val="aichi">岡崎市</option>
</select>

続いて、jQueryの記述を使って、プログラム部分を書いていきましょう。

var $city = $('select[id="city"]');
$('select[id="prefecture"]').change(function() {
  var val1 = $(this).val();  
  $city.find('option').each(function() {
    var val2 = $(this).data('val');
    if (val1 === val2) {
      $(this).show();
    }else {
      $(this).hide();
    }
  })
})

今回は、HTMLの2つ目のselect要素の中に、プルダウンメニューのoption要素をすべて記述しています。

このoption要素のうち、1つ目で選んだものと関連するものだけを残し、それ以外を削除する処理をJavaScriptで書いていきます。

val1には、「id=”prefecture”」のselect要素で選んだvalue属性の値を代入します。

option要素のdata-val属性の値を順番に調べていき、上記の値と同じ値を持つものだけを、最後のif文を使って残しています。

jQueryのメリット・デメリット

jQueryは便利なライブラリですが、メリットだけでなくデメリットもあります。

jQueryが抱えているデメリットをきちんと把握して、適切な場所で使用することが重要になってきます。

jQueryのメリット・デメリットをいくつか紹介します。

主に、jQueryには、

というメリットがあります。

より簡易的にコードが書けるため、ミスに気づきやすく、初心者にも優しいです。

JavaScriptのみでは、ブラウザの仕様によって同じコードでも異なる動作が起きることがあります。

これらの問題をjQueryの中で解決してくれているので、ブラウザごとの対応を気にする必要が無くなります。

デメリットとしては、

というものがあります。

jQueryを使う場合、前述のように、ブラウザの違いに対応するなど多くの処理を読み込んでいるため、ページ表示が遅くなることがあります。

短いコードで済む場合には、純粋にJavaScriptのみを使うなど、場面に応じた選択することが重要になるでしょう。

「React」や「Vue.js」など、他のフレームワークやライブラリと併用することで、正常な動作が行われなくなることがあります。

こちらも問題が生じる場合は、JavaScriptのみの記述で対応する必要が出てきますね。

jQueryの処理の仕組みを理解するためにも、JavaScriptの知識は大切になってきますので、jQueryを使う場合でもJavaScriptの学習はしておいた方が良いでしょう。

まとめ：連動したプルダウンメニューにはプログラムが必須

今回は、HTMLを使って、複数のプルダウンメニューを連動させる方法を解説しました。

HTMLだけでも複数のプルダウンメニューが作れますが、連動させることはできない、ということでしたね。

連動したプルダウンメニューを作りたい場合には、JavaScriptなどのプログラムが必要になります。

プログラムと聞くと難しそうですが、自分で実装して学んでいけば、少しずつ知識がついてくるはずです。

プログラムを学ぶきっかけとして、今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！