javascript - 改变一个的改变另一个的子节点被选中

Question

所以我有这些javascript代码行，我需要删除所选选择元素的所有子节点并将新的选项元素附加到它。选项元素的值存储在“personaggi”数组中。因此，对于 0,1 和 2 的“k”值，代码似乎可以正常工作。当 k=3 时，它不再正常工作，我不知道为什么。函数应该是这样的：

response=xmlhttp.responseText;
var personaggi=response.substr(1).split("+");
select=document.getElementById('select_personaggi');
var length=select.childNodes.length;
for(k=0;k<length;k++){ 
    select.removeChild(select.childNodes[k]); 
}
for(i=0;i<personaggi.length;i++){ 
    var option=document.createElement('option'); 
    option.setAttribute('value', personaggi[i]); 
    var text=document.createTextNode(personaggi[i]); 
    option.appendChild(text); 
    option.appendChild(text); 
    select.appendChild(option); 
}

希望我很好地解释了我的问题:)

Answer 1

您基本上是在循环中从数组中删除元素......这将永远无法正常工作。数组的大小会随着时间而变化，但您会不断增加索引。

要么以相反的顺序遍历节点，要么执行以下操作：

while(select.firstChild) {
    select.removeChild(select.firstChild);
}

Answer 2

处理选择选项更容易和更清洁：

response=xmlhttp.responseText;
var personaggi=response.substr(1).split("+");
select=document.getElementById('select_personaggi');

var length = select.options.length;
for (k = 0; k < length; k++) {
    select.options[0] = null;
}

for (i = 0; i < personaggi.length; i++) {
    select.options.add(new Option(personaggi[i], personaggi[i], true, false));
}