[jQuery] セレクトボックスの切り替えに応じて、次のセレクトボックスの選択肢を切り替える

概要

例えば、なんらかの大区分をセレクトボックスで選択すると、連動して大区分に対応した中区分のみが中区分用セレクトボックスで選択できるようになり、同様に中区分を選択すると対応する小区分が選択できるようになるアレを実装する。

上記説明がわかりづらすぎるのでgifにすると以下の感じ

パッと思いついた方法なのでもっと良い方法ありそう。というかjQueryじゃなくてReactやVueを使うべきだけど。

前提

以下環境で動作確認

OSX 10.12.6
GoogleChrome 62.0
jQuery 3.2.1

HTML

とりあえず大区分、中区分、小区分のselectを表示する。内容は動的に追加するので空で。
jQueryを使うのでCDNで読んでおく。

<html>
  <head>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  </head>
  <body>
    大区分 <select id="select_a"></select>
    中区分 <select id="select_b"></select>
    小区分 <select id="select_c"></select>
  </body>
</html>

JavaScript

ポイントは中区分、小区分は上位区分の選択に応じた選択肢のみをoptionタグで描画すること。

//
// 選択肢を全て事前に定義する
// 中区分は2次元配列
// 小区分は3次元配列
//
var a_options = ['区分1', '区分2'];
var b_options = [
  ['区分1-1', '区分1-2'],
  ['区分2-1', '区分2-2'],
];
var c_options = [
  [
    ['区分1-1-1', '区分1-1-2'],
    ['区分1-2-1', '区分1-2-2'],
  ],
  [
    ['区分2-1-1', '区分2-1-2'],
    ['区分2-2-1', '区分2-2-2'],
  ],
]
$(function() {

  //
  // select要素を予め取得しておく
  //
  var $select_a = $('#select_a');
  var $select_b = $('#select_b');
  var $select_c = $('#select_c');

  //
  // 大区分決定時に中区分に選択肢を設定
  //
  $select_a.change(function(e) {
    var selected_a = $select_a.val();
    $('#select_b option').remove();
    b_options[selected_a].forEach(function(option_b, idx) {
      var $option_tag = $('<option>').val(idx).text(option_b);
      $select_b.append($option_tag);
    });
    $select_b.change();
  });

  //
  // 中区分決定時に小区分の選択肢を設定
  //
  $select_b.change(function(e) {
    var selected_a = $select_a.val();
    var selected_b = $select_b.val();
    $('#select_c option').remove();
    c_options[selected_a][selected_b].forEach(function(option_c, idx) {
      var $option_tag = $('<option>').val(idx).text(option_c);
      $select_c.append($option_tag);
    });
  });

  //
  // 大区分は固定なので最初に選択肢に追加する
  //
  a_options.forEach(function(option_a, idx) {
    var $option_tag = $('<option>').val(idx).text(option_a);
    $select_a.append($option_tag);
    $select_a.change();
  });

});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です