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>

现在我要创建菜单D2随D1选择动态变化，例如，如果我在D1中选择K1，则下拉菜单D2将显示V1 V2，而当我在D1中更改为K2时，菜单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中的当前元素或仅获取下拉列表。但我希望这个例子能让您知道如何解决您的问题

如何从Django模板动态更改html中的下拉菜单

1 个答案: