Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

カスタムデータ属性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(){
        if( 1 < $(this).find('option:selected').length ){//複数選択時に処理
            $(childSelect).find("option").each(function(index, element){
                $(element).remove();
            });
        }else{
            var subgroup =  $(this).find('option:selected').attr('data-subgroup');
            $(childSelect).html(initCategorySmallHtml);
            $(childSelect).find("option").each(function(index, element){
                var group = $(element).attr('data-group');
                if( group ){
                    if( subgroup == group ){
                        //$(element).css('display', 'block');//IEではoptionタグに対してdisplayは効かないため
                    }else{
                        //$(element).css('display', 'none');//IEではoptionタグに対してdisplayは効かないため
                        $(element).remove();
                    }
                }
            });
        }
        $(childSelect).val('').change();//未選択時の値は''じゃない場合は書き換えてね
    });
}
momosetkn
JVM系言語など、静的型付け言語が好き。低レイヤーのパフォーマンスについて興味があります。 Java/Scala/Python/TypeScript
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。
https://qiitadon.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした