Javascript填充选择框

[代码]

$.ajax
({
    'method': 'GET',
    'source': '/bpv-registratie/periods/show_period_list_by_year.html',
    'charge': function () 
    {
    },
    'finish': function (xmlHttp) 
    {       
        var options = new Array();
        var response = eval('(' + xmlHttp.responseText + ')');                                              

        var child = document.createElement('option');
        child.setAttribute('value', 'none');
        child.setAttribute('checked', 'checked');
        child.innerHTML = '&nbsp';

        options.push(child);

        for (var c = 0; c < response.length; c++)
        {
            var child = document.createElement('option');
            child.setAttribute('value', response.data[c].periode_id);
            child.innerHTML = response.data[c].periode_naam +
                              ' (' + 
                              response.data[c].periode_startdatum +
                              ' t/m ' +
                              response.data[c].periode_einddatum +
                              ' )';             
            options.push(child);
        }                                               
        for (var a = 0; a < obj.childNodes.length; a++)
        {
            var e = obj.childNodes[a].getElementsByTagName("select");

            for (var f = 0; f < e.length; f++)
            {       
                e[f].length=0;                  
                for (var o = 0; o < options.length; o++)
                {               
                    e[f].appendChild(options[o]);               
                }
            }
        alert('test');
        }   
    }
});

$.ajax
({
'方法'：'获取'，
“来源”：“/bpv registratie/periods/show_period_list_by_year.html”，
“电荷”：函数（）
{
},
“完成”：函数（xmlHttp）
{       
var options=新数组（）；
var response=eval（'（'+xmlHttp.responseText+'）；
var child=document.createElement（'option'）；
setAttribute（'value'，'none'）；
setAttribute（'checked'，'checked'）；
child.innerHTML='nbsp'；
选项：推送（儿童）；
对于（var c=0；c

[问题]

$.ajax
({
    'method': 'GET',
    'source': '/bpv-registratie/periods/show_period_list_by_year.html',
    'charge': function () 
    {
    },
    'finish': function (xmlHttp) 
    {       
        var options = new Array();
        var response = eval('(' + xmlHttp.responseText + ')');                                              

        var child = document.createElement('option');
        child.setAttribute('value', 'none');
        child.setAttribute('checked', 'checked');
        child.innerHTML = '&nbsp';

        options.push(child);

        for (var c = 0; c < response.length; c++)
        {
            var child = document.createElement('option');
            child.setAttribute('value', response.data[c].periode_id);
            child.innerHTML = response.data[c].periode_naam +
                              ' (' + 
                              response.data[c].periode_startdatum +
                              ' t/m ' +
                              response.data[c].periode_einddatum +
                              ' )';             
            options.push(child);
        }                                               
        for (var a = 0; a < obj.childNodes.length; a++)
        {
            var e = obj.childNodes[a].getElementsByTagName("select");

            for (var f = 0; f < e.length; f++)
            {       
                e[f].length=0;                  
                for (var o = 0; o < options.length; o++)
                {               
                    e[f].appendChild(options[o]);               
                }
            }
        alert('test');
        }   
    }
});

运行上面带有警报的代码，它显示所有的选择框都会被我想要的选项填充。但是，一旦开始填充下一个选择框，上一个选择框将再次被清除。 有人知道为什么吗

[情况]

$.ajax
({
    'method': 'GET',
    'source': '/bpv-registratie/periods/show_period_list_by_year.html',
    'charge': function () 
    {
    },
    'finish': function (xmlHttp) 
    {       
        var options = new Array();
        var response = eval('(' + xmlHttp.responseText + ')');                                              

        var child = document.createElement('option');
        child.setAttribute('value', 'none');
        child.setAttribute('checked', 'checked');
        child.innerHTML = '&nbsp';

        options.push(child);

        for (var c = 0; c < response.length; c++)
        {
            var child = document.createElement('option');
            child.setAttribute('value', response.data[c].periode_id);
            child.innerHTML = response.data[c].periode_naam +
                              ' (' + 
                              response.data[c].periode_startdatum +
                              ' t/m ' +
                              response.data[c].periode_einddatum +
                              ' )';             
            options.push(child);
        }                                               
        for (var a = 0; a < obj.childNodes.length; a++)
        {
            var e = obj.childNodes[a].getElementsByTagName("select");

            for (var f = 0; f < e.length; f++)
            {       
                e[f].length=0;                  
                for (var o = 0; o < options.length; o++)
                {               
                    e[f].appendChild(options[o]);               
                }
            }
        alert('test');
        }   
    }
});

---

我有一堆选择框，它们是由大约相同的代码生成的。这些代表了一个人所处的阶级。应从选择框中选择该类。然而，如果老师想把这个人换到不同的时间段，那很可能意味着在这个时间段有不同的课程，所以我要做的是在选择框中填入新时间段的课程。

我不确定什么是

obj

，但在我看来，这就是正在发生的事情（由注释表示）：

//循环obj的所有子节点（不仅仅是直接子节点）
对于（var a=0；a

这里的注释“不仅仅是立即的”，假设你有一个结构

<div id="a">
    <div id="b">
        <div id="c">
             <select id="d"></select>
        </div>
    </div>
</div>

当你循环遍历“a”的子代时，你得到了所有的子代，即b，c，d。下次在你的子代迭代中，你看到的是“b”本身，所以你得到了“c”和“d”

在每个循环中，您填充

select

框

---

简而言之，您可能对

childNodes

属性做出了错误的假设。

我认为您的问题在于单个选项对象一次只能位于一个

中。您第一次遍历循环会填充第一个选择，然后第二次遍历循环会移动选项从第一个

到第二个。冲洗并重复，直到最后一个

包含所有选项

解决方案是在将选项添加到

时创建它们。第一个循环应该只构建一个数组来保存值和标签，然后将简单的数据扩展到选项DOM元素，并将它们交给

。这将为每个

创建一组唯一的选项对象

下面是一个简单的示例，您可以使用它来了解发生了什么：

我将包含小提琴内联部分，以供将来参考；HTML：

<select id="a"></select>
<select id="b"></select>
<button id="c">fill first</button>
<button id="d">fill second</button>

先填
填补第二

和JavaScript：

var options = [ ];
var option;
for(var i = 0; i < 10; ++i) {
    option = document.createElement('option');
    option.setAttribute('value', i);
    option.innerHTML = i;
    options.push(option);
}

$('#c').click(function() {
    var s = document.getElementById('a');
    for(var i = 0; i < options.length; ++i)
        s.appendChild(options[i]);
});
$('#d').click(function() {
    var s = document.getElementById('b');
    for(var i = 0; i < options.length; ++i)
        s.appendChild(options[i]);
});

var选项=[]；
var期权；
对于（变量i=0；i<10；++i）{
option=document.createElement（'option'）；
option.setAttribute（'value'，i）；
option.innerHTML=i；
选项。推送（选项）；
}
$（'#c'）。单击（函数（）{
var s=document.getElementById（'a'）；
对于（变量i=0；i

我认为问题比这更简单，按一下这里的按钮，观察选择：接受作为答案，因为显示一个数组只能设置一次。通过为每个选择框创建一个新选项，我已成功填充了所有选择框。