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

[问题]

运行上面带有警报的代码，它显示所有选择框都填满了我希望它们填满的选项。但是，一旦它开始填充下一个选择框，前一个选择框就会再次被清除。 有谁知道为什么吗？

[情况]

我有一堆由大致相同的代码生成的选择框。这些代表一个人可以进入的类(class)。应该从选择框中选择类(class)。但是，如果老师希望将此人换到不同的时期，那很可能意味着那个时期有不同的类(class)，所以我要做的是用新时期的类(class)填充选择框。

Answer 1

我认为你的问题是单个选项对象只能在一个 <select> 中。一次。你第一次通过循环填充第一个选择，然后你第二次通过循环移动来自第一个<select>的选项。到第二个。冲洗并重复直到你的最后<select>以所有选项结束。

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

这是一个简单的例子，您可以尝试看看发生了什么:

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

我将内联 fiddle 以供将来引用； 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]);
});