Question

简单问题：我想使用JavaScript在HTML中的两个下拉列表中循环数组值。但只有一个下拉列表正在运行。如果我评论一个，另一个工作。我想填写下拉列表中的值。这个简单的代码有什么问题？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

您的代码无效的原因是CVE-2016-5195

希望这会有所帮助：）

Answer 4

您可以同时使用JavaScript和jQuery：

＆＃13;

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

＆＃13;

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

＆＃13;

这是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函数选择here。

Answer 6

问题是您创建的元素只能附加在一个父元素中。不是都。 Bellow代码片段

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。

使用JavaScript的数组中的两个下拉值

6 个答案: