Изменение <select> «s <option> ChildNodes об изменении другого <select>» с выбранным <option>

Question

Поэтому у меня есть следующие строки коды яваскрипта, что мне нужно, чтобы удалить все дочерние узлы выбранного элемента выбора и добавлять новые опции в него элементы. Значения элементов опций хранятся в массиве «personaggi». Таким образом, код работает нормально для значений «k» 0,1 и 2. Когда 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)); 
}