的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屬性一個錯誤的假設。