Question

我有两个标识为validKeys1和validKeys2的下拉菜单，我正在尝试使用下面的javascript代码填充数组中的下拉菜单，但它只会填充{{1 }}。如何在多个ID上使用相同的javascript？

validKeys2

Answer 1

appendChild()获取传递的元素，将移动到父元素中。意思是如果它已经在一个元素内部，则将其从那里移除并放入另一个元素中。

您可以制作一个全新的元素，也可以使用cloneNode()添加到第二个选择

validKeys1.appendChild(el);
validKeys2.appendChild(el.cloneNode(true));

Answer 2

您可以使用常规class而 cloneNode 每次追加时都会复制节点el：

var validKeys = document.getElementsByClassName("validKeys");

for(var i = 0; i < validCoursesKeys.length; i++) {
    var opt = validCoursesKeys[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;

    for(var j = 0; j < validKeys.length; j++) {
         validKeys[j].appendChild(el.cloneNode(true));
    }
}

希望这有帮助。

＆＃13;

var validCoursesKeys = ['opt 1','opt 2','opt 3','opt 4']
var validKeys = document.getElementsByClassName("validKeys");

for(var i = 0; i < validCoursesKeys.length; i++) {
  var opt = validCoursesKeys[i];
  var el = document.createElement("option");
  
  el.textContent = opt;
  el.value = opt;

  for(var j = 0; j < validKeys.length; j++) {
    validKeys[j].appendChild(el.cloneNode(true));
  }
}

＆＃13;

<select class="validKeys"></select>
<select class="validKeys"></select>
<select class="validKeys"></select>

＆＃13;

Answer 3

您的代码实际上是将option元素附加到validKeys1，然后将其父元素更改为validKeys2。这应该按照您的预期工作。

var validKeys1 = document.getElementById("validKeys1");
var validKeys2 = document.getElementById("validKeys2");

for(var i = 0; i < validCoursesKeys.length; i++) {
    var opt = validCoursesKeys[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    validKeys1.appendChild(el);
    var el2 = el.cloneNode(false);
    validKeys2.appendChild(el2);
}

Answer 4

这可能对数组

使用forEach方法也很有用

var validKeys1 = document.getElementById("validKeys1");
var validKeys2 = document.getElementById("validKeys2");
[validKeys1, validKeys2].forEach((ids) => {
     validCoursesKeys.forEach((courses) => {
        var opt = courses
        var el = document.createElement('option');
        el.textConent = opt;
        el.value = opt;
        ids.appendChild(el)
   })
})

如何将JavaScript应用于多个ID？

4 个答案: