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>

现在我的问题是，当此代码填充第一个下拉列表的下拉列表时，为什么它不使用新的计算数组在下拉列表框中没有选定元素的情况下填充后续下拉列表的下拉列表？

Answer 1

一个可能的问题是您如何在选择中添加选项。 代替这个：

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");

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