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

[问题]

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

[现状]

我有一堆从大约相同代码生成的选择框。这些代表一个人可以进入的类。应该从选择框中选择该类。但是，如果教师希望将某个人改为不同的时期，那很可能意味着在那个时期内有不同的班级，所以我要做的就是用新时期的班级填写选择框。 / p>

Answer 1

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

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

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

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

我会在内容中包含小提琴以供将来参考; 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究竟是什么，但在我看来，这就是正在发生的事情（由评论表示）：

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

Javascript填充选择框

2 个答案: