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