Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What are the problem?
@momosetkn

階層のあるセレクトボックス(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();//未選択時の値は''じゃない場合は書き換えてね
  });
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
18
Help us understand the problem. What are the problem?