如何使用 Razor 中的 Javascript 同时将项目添加到多个下拉列表？答案

【问题标题】：How do I add items to multiple drop down lists at the same time with Javascript in Razor?如何使用 Razor 中的 Javascript 同时将项目添加到多个下拉列表？
【发布时间】：2012-10-17 05:24:31
【问题描述】：

我正在创建一个 MVC 表单，我有多个复选框和两个下拉列表。我已经弄清楚如何根据选中的框填充第一个 DDL（即，一开始是空的，选中框填充项目）。但是，我想添加另一个具有相同项目并以相同方式填充的 DDL。我的代码如下所示：

<script type="text/javascript">
    function checkedToggle(value, checked) {
        x = document.getElementById("filter1");
        y = document.getElementById("filter2");
        if (checked == true) {
            var option = document.createElement("option");
            option.text = value;
            x.add(option, null);
            y.add(option, null);
        }
        else {
            for (i = 0; i < x.length; i++) {
                if (x.options[i].value == value) {
                    x.remove(i);
                    y.remove(i);
                }
            }
        }
    }
</script>

一旦取消选中该框，else 语句显然会从列表中删除一个项目。

现在，当您单击复选框时，不是将项目添加到两个列表中，而是仅添加到第二个列表中，我不确定为什么。有什么建议吗？

【问题讨论】：

标签： javascript asp.net-mvc razor html-select

【解决方案1】：

您需要创建两个元素，因为在您的代码中您只需将第一个 DOM 元素移动到第二个选择。

var option = document.createElement("option");
var option2 = document.createElement("option");

option.text = value;
option2.text = value;

x.add(option, null);
y.add(option2, null);

【讨论】：