的javascript：複製一個選擇列表到另一個

Question

我使用下面的代碼：

var x = document.getElementById("one"); 
var len = x.options.length; 
var y = document.getElementById("two"); 
for (i = 0; i < len; i++) { 
    var option = document.createElement("option"); 
    option.text = option.value = x.options[i].value; 
    y.add(option); 
    x.remove(i); 
} 

但是，我看到以下錯誤：

Cannot read property 'value' of undefined 

第一ListBox中的元素太不被刪除。我錯在哪裏？

Answer 1

您正在從x.options中刪除元素，但是當您這樣做時，列表會變小，並且您仍在迭代，直到舊值的長度。所以在某些時候，你會得到一個超過你的（現在縮短的）列表末尾的索引，並且x.options[i]將會是undefined。

var x = document.getElementById("one"); 
var y = document.getElementById("two"); 
while (x.options[0]) { 
    var option = document.createElement("option"); 
    option.text = option.value = x.options[0].value; 
    y.add(option); 
    x.remove(0); 
} 

或者通過反向迭代：您可以通過只迭代只要x.options[0]存在，總是從列表中刪除第一個元素解決這個

var x = document.getElementById("one"); 
var len = x.options.length; 
var y = document.getElementById("two"); 
for (i = len; i--;) { 
    var option = document.createElement("option"); 
    option.text = option.value = x.options[i].value; 
    y.add(option,0); 
    x.remove(i); 
} 

Answer 2

在遍歷數組時，從數組中移除元素通常不是一個好主意，因爲您可以拋棄索引。如果按索引降序而不是增加索引來查看元素，則應該避免此問題