자바스크립트 다중 드롭다운 구현 예제 📂프로그래밍

자바스크립트 다중 드롭다운 구현 예제

쇼케이스

왼쪽부터 순서대로 큰 분류에서 작은 분류로 내려가는 다중 드롭다운을 구현했다. 상위 드롭다운이 선택되면 하위 드롭다운이 자바스크립트를 통해해 동적으로 업데이트 된다. 이 예제에서 가장 중요한 점은 아주 간단한 방법으로 이중 이상의 가장 일반적인 드롭다운을 만들 수 있다는 것이다.

코드

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: 하위 드롭다운을 선택한 요소를 가져온다.

여기서 한가지 사용된 트릭은 목록의 가장 앞부분을 빈 문자열 ““로 시작했다는 것이다. 이는 사용자가 아무것도 선택하지 않았을 때를 나타내며, 하위 드롭다운이 비어있도록 한다.