階層のあるセレクトボックス(JavaScript)

カスタムデータ属性data-group,data-subgroupをoptionタグにつけて
階層のあるセレクトボックスを連動させます。
例は3段階ですが何段階でもいけます。
車輪の再発明な気はするけど。
2018/01/25 複数選択プルダウンに対応しました。

どういう動き？

単一選択プルダウンの場合

See the Pen JMQKKM by momosetkn (@momosetkn) on CodePen.

複数選択プルダウンの場合

See the Pen eyPMqg by momosetkn (@momosetkn) on CodePen.

ソースコード

セレクトボックスの例

<select name="area1" id="area1">
    <option data-subgroup="" value="">未選択</option>
    <option data-subgroup="nihon" value="1">日本</option>
    <option data-subgroup="amerika" value="2">アメリカ</option>
    <option data-subgroup="doitu" value="3">ドイツ</option>
</select>
<select name="area2" id="area2">
    <option data-group="" value="">未選択</option>
    <option data-group="nihon" data-subgroup="tokyo" value="1">東京</option>
    <option data-group="nihon" data-subgroup="niigata" value="2">新潟</option>
    <option data-group="nihon" data-subgroup="okinawa" value="3">沖縄</option>
    <option data-group="amerika" data-subgroup="nyu-yo-ku" value="1">ニューヨーク</option>
    <option data-group="amerika" data-subgroup="sikago" value="2">シカゴ</option>
    <option data-group="doitu" data-subgroup="kerun" value="1">ケルン</option>
</select>
<select name="area3" id="area3">
    <option data-group="" value="">未選択</option>
    <option data-group="tokyo" value="1">品川区</option>
    <option data-group="niigata" value="2">港区</option>
    <option data-group="okinawa" value="3">江東区</option>
    <option data-group="nyu-yo-ku" value="1">ニューヨークのどこか1</option>
    <option data-group="nyu-yo-ku" value="2">ニューヨークのどこか2</option>
    <option data-group="sikago" value="1">シカゴのどこか1</option>
    <option data-group="sikago" value="2">シカゴのどこか2</option>
    <option data-group="kerun" value="1">ケルンのどこか</option>
</select>

セレクトボックスイベント初期設定

//地域セレクトボックスイベント設定
setHierarchySelectEvent('#area1', '#area2');
setHierarchySelectEvent('#area2', '#area3');
//セレクトボックスの初期値
$('#area1').val('1').change();
$('#area2').val('2').change();
$('#area3').val('2').change();

/**
 * 階層のあるプルダウンのイベントを設定します.
 * 親のselectタグには属性data-subgroupが設定されている必要があります。
 * 子のselectタグには属性data-groupが設定されている必要があります。
 * @param parentSelect 親となるselectタグのセレクタ
 * @param childSelect 子となるselectタグのセレクタ
 */
function setHierarchySelectEvent(parentSelect, childSelect){
  var initCategorySmallHtml = $(childSelect).html();
  $(parentSelect).change(function(){
    var subgroups = []
    $(this).find('option:selected').each(function(index, element){
      subgroups.push($(element).attr('data-subgroup'));
    });

    $(childSelect).html(initCategorySmallHtml);
    $(childSelect).find("option").each(function(index, element){
      var group = $(element).attr('data-group');
      if( group ){
        if( subgroups.includes(group) ){
          //$(element).css('display', 'block');//IEではoptionタグに対してdisplayは効かないため
        }else{
          //$(element).css('display', 'none');//IEではoptionタグに対してdisplayは効かないため
          $(element).remove();
        }
      }
    });
    $(childSelect).val('').change();//未選択時の値は''じゃない場合は書き換えてね
  });
}