使用JavaScript的數組中的兩個下拉值

Question

簡單的問題：我想使用JavaScript在HTML中的兩個下拉列表中循環數組值。 但只有一個下拉列表正在運行。 如果我評論一個，另一個工作。 我想填寫下拉列表中的值。 這個簡單的代碼有什么問題？

 var select = document.getElementById("selectNumber"); var select2 = document.getElementById("selectNumber2"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); select2.appendChild(el); } 

 <select id="selectNumber"> <option>Choose a number</option> </select> <select id="selectNumber2"> <option>Choose a number</option> </select> 

Answer 1

不要對兩個控件使用相同的元素。 首先克隆它

 var select = document.getElementById("selectNumber"); var select2 = document.getElementById("selectNumber2"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); select2.appendChild(el.cloneNode(true)); } 

 <select id="selectNumber"> <option>Choose a number</option> </select> <select id="selectNumber2"> <option>Choose a number</option> </select> 

Answer 2

為每個select創建一個option元素，appendChild不克隆元素，所以第二個append從第一個元素中獲取元素

 var select = document.getElementById("selectNumber"); var select2 = document.getElementById("selectNumber2"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; var el1 = document.createElement("option"); el1.textContent = opt; el1.value = opt; select.appendChild(el1); select2.appendChild(el); } 

 <select id="selectNumber"> <option>Choose a number</option> </select> <select id="selectNumber2"> <option>Choose a number</option> </select> 

Answer 3

 var select = document.getElementById("selectNumber"); var select2 = document.getElementById("selectNumber2"); var options = ["1", "2", "3", "4", "5"]; for(var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); var el2 = document.createElement("option"); el2.textContent = opt; el2.value = opt; select2.appendChild(el2); } 

 <select id="selectNumber"> <option>Choose a number</option> </select> <select id="selectNumber2"> <option>Choose a number</option> </select> 

創建兩個不同的節點並添加它們。

您的代碼無效的原因在於此處

希望這可以幫助 ：）

Answer 4

您可以使用JavaScript和jQuery：

  var options = ["1", "2", "3", "4", "5"]; $.each(options, function(key, value) { $('#selectNumber,#selectNumber2').append($("<option/>", { value: key, text: value })); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectNumber"> <option>Choose a number1</option> </select> <select id="selectNumber2"> <option>Choose a number2</option> </select> 

這是JavaScript代碼：

<script>
        var select = document.getElementById("selectNumber");
        var select2 = document.getElementById("selectNumber2");
        var options = ["1", "2", "3", "4", "5"];
        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
            select2.appendChild(el.cloneNode(true));
        }
    });
</script>

如果您想要單獨選項代碼，這是另一種選擇

<script>
    var select = document.getElementById("selectNumber");
    var select2 = document.getElementById("selectNumber2");
    var options = ["1", "2", "3", "4", "5"];
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];

        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);

        var e2 = document.createElement("option");
        e2.textContent = opt;
        e2.value = opt;
        select2.appendChild(e2);
    }
</script>

Answer 5

這是沒有克隆的方法（ jsFiddle ）：

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    select.add(new Option(opt,opt));
    select2.add(new Option(opt,opt));
}

在此處閱讀有關JavaScript add功能的更多信息。

Answer 6

問題是您創建的元素只能附加在一個父元素中。 不是都。 咆哮有效的代碼片段

var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
  var copy = el.cloneNode(true);
  select2.appendChild(copy);
}

只需注意行var copy = el.cloneNode(true); 這將創建元素的新克隆，然后將其附加到另一個select 。