如何将JavaScript应用于多个ID？

问题描述：

我有两个下拉菜单，编号为validKeys1和validKeys2，我试图使用下面的javascript代码从数组中填充下拉菜单，但它只会填充validKeys2。如何在多个ID上使用同一段JavaScript？如何将JavaScript应用于多个ID？

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); 
    validKeys2.appendChild(el); 
}

在foreach方法，你必须创建'option'为每个“validKey”，你不能在两个地方使用一个HTML元素（appendChild将一个元素从它的当前位置“移动”到你要添加它的地方 - 这就是为什么只有validKeys2才会有选项） –

答

你可以使用一般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)); 
    } 
}

希望这有助于。

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

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

谢谢。我最初试图用'class'来做到这一点：https：//jsfiddle.net/ndo1xrmk/，但它显然是错误的...... HTML应该如何寻找这个工作？（对不起，HTML/JS超级新手，已经使用了三天） – stumpylumpy

使用类不是解决方案 - 它是解决问题的克隆 –

@JaromandaX是正确的主要想法是克隆节点el '所以我们可以将它附加到多个列表中，但在这种情况下使用类的IMO比IDS更有效。 –

答

您的代码实际上是附加选项元素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); 
}

答

appendChild()需要传递的元件和移动它变成父元素。意思是如果它已经在一个元素内，它将从那里被移除并放入另一个元素中。

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

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

答

这可能也是有用的，用在阵列

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？

相关推荐