如何從django模板動態更改html中的下拉菜單

Question

我在django views.py中創建了一個字典，如下所示：

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

在我的html頁面中，我創建了兩個下拉菜單。

菜單D1可以在html中從字典（K1 / K2）中選擇鍵：

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

現在我想用D1選擇動態改變創建菜單D2，例如，如果我在D1中選擇K1，下拉菜單D2將顯示V1 V2，當我在D1中改為K2時，菜單D2將顯示V3 V4，我突然不要知道怎么做，任何人都可以幫助我嗎？ 很感謝！

Answer 1

對於這個使用vanilla 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);
}

}

回調函數是在下拉列表中更改某些內容時調用的函數。當然，您必須執行更多操作，例如清除DOM中的當前元素或僅獲取下拉列表。 但我希望這個例子能讓你了解如何解決問題