JavaScript：为什么新的下拉列表中没有填充值

Question

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>

Now my question is when this code fills the dropdown list for the first dropdown why does it not fill the dropdown list for the subsequent dropdowns with the new calculated array not having the already selected elements in the dropdowns boxes ? 现在我的问题是，当此代码填充第一个下拉列表的下拉列表时，为什么它不使用新的计算数组在下拉列表框中没有选定元素的情况下填充后续下拉列表的下拉列表？

Answer 1

One possible problem is in how you're adding options to your select. 一个可能的问题是您如何在选择中添加选项。 Instead of this: 代替这个：

DropDwn.appendChild(addOption);

Opt for this: 选择这个：

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

Your select has an id, so instead of 您的选择有一个ID，因此不是

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

Just select this element by id: 只需通过id选择此元素：

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

JavaScript：为什么新的下拉列表中没有填充值

问题描述

1 个解决方案

解决方案1
1 2012-01-30 20:11:58

JavaScript：为什么新的下拉列表中没有填充值

问题描述

1 个解决方案

解决方案1 1 2012-01-30 20:11:58

解决方案1
1 2012-01-30 20:11:58