Javascript填充选择框

Question

[代码]

$.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');
        }   
    }
});

[问题]

使用警报运行上面的代码，它显示所有选择框都填满了我想要的选项。然而，一旦它开始填充下一个选择框，前一个选择框就会再次被清除。 有谁知道为什么？

[情况]

我有一堆从大致相同的代码生成的选择框。这些代表一个人可以参加的班级。应该从选择框中选择班级。但是，如果老师希望将人更改为不同的时期，那很可能意味着该时期有不同的课程可用，所以我要做的是用新时期的课程填充选择框。

Answer 1

我认为您的问题是单个选项对象一次只能在一个 <select> 中。您的第一次循环会填充第一个选择，然后您的第二次循环会移动选项从第一个 <select> 到第二个。冲洗并重复，直到最后的 <select> 包含所有选项。

解决方案是在您将选项添加到<select> 时创建选项。您的第一个循环应该只构建一个数组来保存值和标签，然后将该简单数据扩展为选项 DOM 元素并将它们交给<select>。这将为每个<select> 创建一组唯一的选项对象。

这是一个简单的例子，你可以用它来看看发生了什么：

http://jsfiddle.net/ambiguous/9WuQC/

我将包含 fiddle inline 以供将来参考； 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]);
});

Answer 2

我不确定obj 到底是什么，但在我看来，这就是正在发生的事情（用 cmets 表示）：

//loop round all the child nodes of obj (not just immediate children)
for (var a = 0; a < obj.childNodes.length; a++)
{
    //get all <select> elements under the current child (a) of obj 
    var e = obj.childNodes[a].getElementsByTagName("select");

    //loop round our selects under the current child node
    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');
}   

“不只是立即”的评论在这里是恰当的。假设你有一个结构

<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 属性做出了错误的假设。