如何將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); 
}

來源

2016-11-20 stumpylumpy

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

來源

2016-11-20 22:09:30

謝謝。我最初試圖用'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); 
}

來源

2016-11-20 22:11:03 Gerrit0

appendChild()需要傳遞的元件和移動它變成父元素。意思是如果它已經在一個元素內，它將從那裏被移除並放入另一個元素中。

您可以做一個全新的元素，或使用cloneNode()添加到您的第二選擇

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

來源

2016-11-20 22:12:03

這可能也是有用的，用在陣列

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

來源

2016-11-20 22:32:36

如何將JavaScript應用於多個ID？

回答

相關問題