的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/

我会包括以备将来参考小提琴联;在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'); 
} 

注释“不只是眼前”这里pertintent。假设你有一个结构

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

当你遍历“一”你所有的孩子，即B，C，d的孩子。下一次围绕你的孩子迭代，你看着'b'本身，所以你得到'c'和'd'。

在每个这些循环中，填充select框。

简短的回答是，你可能已经在关于childNodes属性一个错误的假设。