Cascading Dropdown List

우리가 자주 사용하는 html element들 중에서 dropdown list가 있다.

dropdown list를 여러개 사용하는 경우 특정 dropdown list가 변경되면 다른 dropdown list도 설정에 의해 자동으로 함께 변하기 원하는 경우가 많다.

이러한 dropdown list를 우리는 cascading dropdown list 라고 한다.

javascript를 이용해서 구현할 수 있으며 복잡도가 있다.

구현 소스는 아래와 같다.

var categories = {
{% for todo_category in todo_categories %}
    "{{ todo_category.id }}": [
    {% if todo_category.type.all|length != 0 %}
        {% for type in todo_category.type.all %}
            "{{ type.id }}:{{ type.name }}",
        {% endfor %}
    {% endif %}
    ],
{% endfor %}
}

var categoriesKeyValue = {
{% for todo_category in todo_categories %}
    "{{ todo_category.id }}": "{{ todo_category.name }}",
{% endfor %}
}

window.onload = function() {
    var categorySel = document.getElementById("id_category");
    var typeSel = document.getElementById("id_type");
    for (var category in categories) {
        categorySel.options[categorySel.options.length] = new Option(categoriesKeyValue[category], category);
    }
    var category_name = "{{ category.name }}";
    var key = Object.keys(categoriesKeyValue).find(key => categoriesKeyValue[key] === category_name);
    categorySel.value = key;
    for(var init_type in categories[key]){
        var typeSplit = categories[key][init_type].split(":");
        typeSel.options[typeSel.options.length] = new Option(typeSplit[1], typeSplit[0]);
    }

    categorySel.onchange = function() {
        typeSel.length = 0;
        for (var y in categories[this.value]) {
            var typeSplit = categories[this.value][y].split(":");
            typeSel.options[typeSel.options.length] = new Option(typeSplit[1], typeSplit[0]);
        }
    }
}

참고한 사이트 주소

• 기본적인 cascading 구현
  • https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp
• javascript value 값을 이용하여 key 가져오기
  • https://www.geeksforgeeks.org/how-to-get-a-key-in-a-javascript-object-by-its-value/
• 특정 값으로 string 나누어 array 만들기
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split