連動する2つのセレクトボックス

2024年10月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「連動するセレクトボックス」を作ってみました。

1番目の選択結果で2番目の選択肢が変化

1番目のセレクトボックスで地方（北海道、東北、関東、中部、近畿、中国、四国、九州）を選ぶと、2番目のセレクトボックスには1番目で選んだ地方に属する都道府県が表示される、という風にしてみます。

ちなみにこの「八地方区分」に法律上の明確な定義はないそうです。中国地方と四国地方をまとめて「中国・四国地方」にした「七地方区分」とする場合もあるようです。

まずselectを2つ設置し、IDをそれぞれregion、prefectureとします。

1番目のselectにonchange="updatePrefectures()"と記述します。

1番目のselectのoptionは空のvalue＋地方名、2番目のselectのoptionは空のvalue1つだけを入れておきます。

<select id="region" onchange="updatePrefectures()">
  <option value="" selected></option>
  <option value="北海道地方">北海道地方</option>
  <option value="東北地方">東北地方</option>
  <option value="関東地方">関東地方</option>
  <option value="中部地方">中部地方</option>
  <option value="近畿地方">近畿地方</option>
  <option value="中国地方">中国地方</option>
  <option value="四国地方">四国地方</option>
  <option value="九州地方">九州地方</option>
</select>

<select id="prefecture">
  <option value="" selected></option>
</select>

スクリプトに地方と都道府県を書いていきます。

function updatePrefectures() {
  const prefectures = {
    "北海道地方": ["北海道"],
    "東北地方": ["青森県", "岩手県", "宮城県",　"秋田県",  "山形県", "福島県"],
    "関東地方": ["茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県"],          
    "中部地方": ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"],
    "近畿地方": ["三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県"],
    "中国地方": ["鳥取県", "島根県", "岡山県", "広島県", "山口県"],
    "四国地方": ["徳島県", "香川県", "愛媛県", "高知県"],
    "九州地方": ["福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"]
  };
  const region = document.getElementById("region").value;
  const prefectureSelect = document.getElementById("prefecture");
  prefectureSelect.innerHTML = "";
  if (region) {
    prefectures[region].forEach(function(prefecture) {
      let option = document.createElement("option");
      option.value = prefecture;
      option.text = prefecture;
      prefectureSelect.appendChild(option);
    });
  }
}

本当は都道府県と市町村でやりたかったのですが、市町村って1700くらいあるそうなので今回はやめておきます＞＜

1番目で選択した項目が2番目の選択肢から消える

仮に、選択肢が5個あるとして（A、B、C、D、E）そこから重複しない2つを選ぶとします。

1番目のセレクトボックスから選択後、2番目のセレクトボックスの選択肢がそれを除く4つに変化する、という風に作ってみます。

まずselectを2つ用意し、ID、onchange、optionを設定します。

<select id="firstSelect" onchange="updateSelectBoxes('firstSelect')">
  <option value="">選択してください</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

<select id="secondSelect" onchange="updateSelectBoxes('secondSelect')">
  <option value="">選択してください</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

スクリプトを記述します。

2番目を先に選んでもちゃんと1番目の選択肢が変化します。

const options = ["A", "B", "C", "D", "E"];
function updateSelectBoxes(changedSelectId) {
  const firstSelect = document.getElementById("firstSelect");
  const secondSelect = document.getElementById("secondSelect");
  const firstSelectValue = firstSelect.value;
  const secondSelectValue = secondSelect.value;
  if (changedSelectId === "firstSelect") {
    updateOptions(secondSelect, firstSelectValue);
    secondSelect.value = secondSelectValue !== firstSelectValue ? secondSelectValue : "";
  } else if (changedSelectId === "secondSelect") {
    updateOptions(firstSelect, secondSelectValue);
    firstSelect.value = firstSelectValue !== secondSelectValue ? firstSelectValue : "";
  }
}
function updateOptions(selectElement, selectedValue) {
  selectElement.innerHTML = "<option value=''>選択してください</option>";
  options.forEach(option => {
    if (option !== selectedValue) {
      let opt = document.createElement("option");
      opt.value = option;
      opt.text = option;
      selectElement.appendChild(opt);
    }
  });
}

まとめ

選択肢を増やせば、仮面ラ〇ダーガッ〇ャードのケミーカードに応用できますね！ガッチャ！

さあ、実験を始めようか