JavaScript的：为什么新的下拉未填充值

Here is my code: 

     <script language="javascript"> 
     var counter =0,temp,m,cloneNodem; 
     function getVtierDefList(){ 
      var vtierDefList = var vtierDefList = [{"label":"d1nis1w20","value":"28914"},{"label":"d1nis1m13","value":"28915"},{"label":"d1nis2d9","value":"28661"},{"label":"d1nis3d1","value":"28916"},{"label":"d1nis1a1","value":"27238"},{"label":"d1nis1a13","value":"28917"},{"label":"s2nis1d0","value":"28660"},{"label":"s2nis1a0","value":"28659"},{"label":"t3nis1d0","value":"27237"}];; 
      return vtierDefList; 
     } 
     </script> 
     </head> 
     <body onload="load();"> 
     <div id="doc"> 
     <div id="main"> 
     <table id="vtier#1"> 
      <tr> 
       <td><button onclick="delVtier(this);return false;" /></td> 
       <td>1.Vtier Name: <select id="vtier" name="vtierSelect" onchange="doAjax(this);return false;"> 
        <option selected="selected" value="-1">Any</option> 
       </select></td> 
      </tr> 
     </table> 
     <div id="accountarea" > 
     </div> 
     </div> 
     </div> 
     <div id="plus"><button onclick="addVtier();return false;"/></div> 

     </body> 
     </html> 
    <script language="javascript"> 
    function addVtier() { 
      m = document.getElementById("main"); 
     cloneNodem = m.cloneNode(true);  
     temp = cloneNodem.cloneNode(true); 
     document.getElementById("main").appendChild(temp); 
       counter++; 
     fillDropDown(counter); 
    } 
    function load() { 
     var vtierSelectedList = document.getElementsByName("vtierSelect"); 
     addDropDownValues(getVtierDefList(), vtierSelectedList[0],"-1"); 
     } 
     function addDropDownValues(Elements,DropDwn,SelectID) 
     { if(DropDwn.options){ 
       DropDwn.options.length = 1 
        } 
      for(var i=0;i<Elements.length;i++) 
      { 
       var addOption = new Option(); 
       addOption.value = Elements[i].value; 
       addOption.innerHTML = Elements[i].label; 
       if(addOption.value == SelectID)addOption.selected = true; 
       DropDwn.appendChild(addOption); 
      } 
     } 
    function fillDropDown(dropDwn) { 

     var vtierSelectedList = document.getElementsByName("vtierSelect"); 
     vtierSelectedArray = new Array(vtierSelectedList.length); 
     var vtierDefList = getVtierDefList(); 
     for(var k=0;k<vtierSelectedList.length;k++) { 
     vtierSelectedArray[k] =vtierSelectedList[k].options[vtierSelectedList[k].selectedIndex].value ; 

     } 
     var diff = diffArray(getVtierDefList(), vtierSelectedArray); 
     addDropDownValues(diff,vtierSelectedList[dropDwn],"-1"); 
} 
// this function diffArray just finds the difference between the two arrays 
function diffArray(a, b) { 
     var seen = [], diff = []; 
     for (var i = 0; i < b.length; i++) 
      seen[b[i]] = true; 
     for (var i = 0; i < a.length; i++) 
      if (!seen[a[i].value]) 
       diff.push(a[i]); 
     return diff; 
    } 
    </script>

现在我的问题是，当这个代码填补了第一个下拉下拉列表为什么它不填写的下拉列表与新计算阵列随后的下拉菜单在下拉框中没有已经选择的元素？JavaScript的：为什么新的下拉未填充值

来源

2012-01-30 linusunis fed

Ughhhhh代码转储。 http://www.jsfiddle.net/并给出一些解释。什么工作？什么不？问题似乎在哪里？你有什么尝试？ JSFiddle虽然是一个很好的开始。它是堆栈溢出的最好的朋友（反正是html，css，js部分） – 2012-01-30 20:09:56

不完全确定，但它看起来像只做'var vtierSelectedList = document.getElementsByName（“vtierSelect”）;'当页面加载时，而不是当你添加一个新的时更新它。 – 2012-01-30 20:25:44

一个可能的问题是如何将选项添加到您的选择。取而代之的是：

DropDwn.appendChild(addOption);

选择这样的：

DropDwn.options.add(new Option(Elements[i].label, Elements[i].value));

你的选择有一个id，这样反而

var vtierSelectedList = document.getElementsByName("vtierSelect"); 
addDropDownValues(getVtierDefList(), vtierSelectedList[0],"-1");

通过ID只要选择这个元素：

var vtierSelectedList = document.getElementsById("vtier"); 
addDropDownValues(getVtierDefList(), vtierSelectedList,"-1");

来源

2012-01-30 20:11:58

JavaScript的：为什么新的下拉未填充值

回答

相关问题