如何使用Razor中的JavaScript將項目添加到多個下拉列表中？

Question

我正在創建一個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語句顯然會從列表中刪除一個項目。

現在，當您單擊複選框而不是將項目添加到兩個列表中時，它只會添加到第二個列表中，而我不完全確定原因。有什麼建議？

Answer 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);