JavaScript Multi Dropdown Implementation Example 📂Programing

JavaScript Multi Dropdown Implementation Example

Showcase

From left to right, this implements cascading dropdowns that go from a broad category to a more specific one. When an upper dropdown is selected, the lower dropdown is dynamically updated via JavaScript. The key point of this example is that you can create the most common multi-level dropdowns (two levels or more) in a very simple way.

Code

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>: The first option of the dropdown, which is displayed by default and cannot be selected. The selected attribute indicates this option is selected by default, and the disabled attribute prevents the user from choosing it.
onchange="updateDropdown(): When the option changes, it calls the updateDropdown function with a number argument indicating the depth of the dropdown.

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: An object that defines the options for each dropdown. Each key is a choice in the upper dropdown, and the value is an array of options to display in the lower dropdown depending on that choice. If all items are unique, there’s no need to split by depth.
function updateDropdown(depth): Takes the depth of the dropdown as an argument and updates the lower dropdown based on the selected value in the dropdown at that depth. This definition enables general usage without redefining functions for each depth.
var upper: Retrieves the element corresponding to the upper dropdown.
var lower: Retrieves the element corresponding to the lower dropdown.

One trick used here is that each list starts with an empty string "". This represents the case where the user has not selected anything and keeps the lower dropdown empty.