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

【问题标题】：how to dynamically change dropdown menu in html from django template如何从 django 模板动态更改 html 中的下拉菜单
【发布时间】：2019-05-29 01:47:35
【问题描述】：

我在 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，我突然不知道怎么办，有谁能帮帮我吗？非常感谢！

【问题讨论】：

标签： javascript python jquery html django

【解决方案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);
}

}

回调函数是当下拉列表 1 中的某些内容发生更改时被调用的函数。当然你必须做更多的事情，比如清除 DOM 中的当前元素或者只是获取下拉列表。但我希望这个例子能让你知道如何解决你的问题

【讨论】：