📂プログラミング

JavaScript マルチドロップダウン実装例

ショーケース

界動物植物 種 亜種

左から順に大きな分類から小さな分類へ降りていく多段ドロップダウンを実装した。上位のドロップダウンが選択されると、下位のドロップダウンが JavaScript を通じて動的に更新される。この例で最も重要な点は、非常に簡単な方法で二重以上の一般的なドロップダウンを作れることだ。

コード

HTML

<select id="dropdown1" onchange="updateDropdown(1)">
    <option value="" selected disabled>계</option>
    <option value="동물">동물</option>
    <option value="식물">식물</option>
</select>

<select id="dropdown2" onchange="updateDropdown(2)">
    <option value="" selected disabled>종</option>
</select>

<select id="dropdown3" onchange="updateDropdown(3)">
    <option value="" selected disabled>아종</option>
</select>

• <option value="" selected disabled>: ドロップダウンの最初のオプションで、選択できずデフォルトで表示されるオプションだ。selected 属性はこのオプションがデフォルトで選択されていることを示し、disabled 属性はユーザーがこのオプションを選べないようにする。
• onchange="updateDropdown(): オプションが変更されると、ドロップダウンの深さを表す数値を引数として updateDropdown 関数を呼び出す。

javascript

<script>
    var options = {
        // depth: 1 → 2
        "동물": ["", "개", "고양이", "말"],
        "식물": ["", "토마토", "바나나", "소나무", "잔디"],
        // depth: 2 → 3
        "개": ["", "시추", "푸들", "골든 리트리버"],
        "고양이": ["", "페르시안", "샴", "러시안 블루"],
        "말": ["", "아라비안", "앵글로-아라비안"],
        "토마토": ["", "체리 토마토", "로마 토마토", "비프스테이크 토마토"],
        "바나나": ["", "애플 바나나", "레드 바나나", "블루 자바 바나나"],
        "소나무": ["", "적송", "구상나무", "전나무"],
        "잔디": ["", "케이프 잔디", "버뮤다 잔디", "조경 잔디"]
    };
    function updateDropdown(depth) {
        var upper = document.getElementById("dropdown" + depth);
        var lower = document.getElementById("dropdown" + (depth+1));
        var selected = upper.value;

        lower.innerHTML = ""; // 기존 옵션 제거
        options[selected].forEach(function(item) {
            var option = document.createElement("option");
            option.text = item;
            option.value = item;
            lower.add(option);
        });
    }
</script>

• var options: 各ドロップダウンのオプションを定義するオブジェクトだ。各キーは上位ドロップダウンの選択肢であり、値はその選択肢に応じて下位ドロップダウンに表示されるオプションの配列だ。すべての項目が一意なら、わざわざ深さに応じて分ける必要はない。
• function updateDropdown(depth): ドロップダウンの深さを引数に取り、当該深さのドロップダウンで選択された値に基づいて下位ドロップダウンを更新する。こう定義することで、深さごとに新たに関数を定義せずに汎用的に使える。
• var upper: 上位のドロップダウン要素を取得する。
• var lower: 下位のドロップダウン要素を取得する。

ここで使われているトリックの一つは、一覧の先頭を空文字列 "" で始めていることだ。これはユーザーが何も選択していないことを表し、下位ドロップダウンが空になるようにする。