Как динамически изменить выпадающее меню в HTML из шаблона Django

Question

Я создаю словарь в django views.py следующим образом:

tmp={"K1":['V1','V2'],"K2":['V3','V4']}

и на своей html-странице я создаю два раскрывающихся меню.

меню D1 может выбрать ключ из словаря (K1 / K2) в html:

<select name="D1"> 
   {% for key, value in tmp.items %} 
       <option value="{{key}}">{{key}}</option>
   {% endfor %}
</select>

Теперь я хочу, чтобы меню D2 динамически изменялось с помощью выбора D1, например, если я выбираю K1 в D1, в раскрывающемся меню D2 будет отображаться V1 V2, а когда я изменяюсь наK2 в D1, меню D2 покажет V3 V4, я вдруг не знаю, как это сделать, кто-нибудь может мне помочь?очень спасибо!

Answer 1

Для этого используйте ванильный JavaScript или jQuery, если вам удобнее.Добавьте прослушиватель событий в первом раскрывающемся списке.Вы можете подготовить элементы, например, используя jQuery:

var first_els = $("<option value="K1">V1</option><option value="K1">V2</option>");
var second_els = $("<option value="K2">V3</option><option value="K2">V4</option>");

function callback(){
    var value = this.value;
    if (value === "K1"){
      dropdown.append(second_els);
} 
    else{
     dropdown.append(first_els);
}

}

Функция обратного вызова - это функция, которая вызывается, когда что-то будет изменено в раскрывающемся списке 1. Конечно, вам нужно сделать больше, например очистить текущие элементы в DOMили просто получить выпадающий список.Но я надеюсь, что этот пример дал вам представление, как решить вашу проблему