search
LoginSignup
18
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

階層のあるセレクトボックス(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();//未選択時の値は''じゃない場合は書き換えてね
  });
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18
Help us understand the problem. What are the problem?