使用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>

创建两个不同的节点并添加它们.

您的代码无效的原因在于此处

希望这可以帮助 :)