使用一个数组填充多个dropDowns

时间:2012-11-22 07:19:52

标签: javascript html

大家好,我有一个简单的问题让我难过。我真的不知道该做什么。我有这样的功能。

     function getThevalues(data) {
     for (var i = 1; i < data.d.length; i++) {

         MystartingLocation[i] = {}
         MystartingLocation[i]["locName"] = {}
         MystartingLocation[i]["locNode"] = {}

                var Opts  = document.createElement("option");
                var Opt = document.createElement("opo");
                MystartingLocation[i]["locNode"] = data.d[i].locNode;
                MystartingLocation[i]["locName"] = data.d[i].locName;
                Opts.text = data.d[i].locName;
                //Opt.text = data.d[i].locName;
                try {
                    document.getElementById("StartLocations").options.add(Opts);
                    document.getElementById("EndLocations").options.add(Opts);

                 }
       catch (e) {console.log(e);}


     }
 }

我正在尝试用相同的值填充起始位置和结束位置下拉列表,但我尝试的每次尝试只填充其中一个endlocation 1。我做错了什么?有人可以指出我正确的方向。 谢谢 米格尔

3 个答案:

答案 0 :(得分:3)

您无法在文档中的两个位置添加相同的元素。

您需要创建两个option元素或克隆您拥有的元素。

document.getElementById("EndLocations").options.add(Opts.cloneNode(true));

使用两个option元素将如下所示:

 function getThevalues(data) {
     for (var i = 1; i < data.d.length; i++) {

         MystartingLocation[i] = {}
         MystartingLocation[i]["locName"] = {}

         var OptA = document.createElement("option");
         var OptB = document.createElement("option");

         MystartingLocation[i]["locNode"] = data.d[i].locNode;

         OptA.text = data.d[i].locName;
         OptB.text = data.d[i].locName;

         try {
             document.getElementById("StartLocations").options.add(OptA);
             document.getElementById("EndLocations").options.add(OptB);
         }
         catch (e) {console.log(e);} 
     }
 }

答案 1 :(得分:3)

你带着同一个孩子,移动它。

document.getElementById("StartLocations").options.add(Opts);
document.getElementById("EndLocations").options.add(Opts);

Opts变量已添加到StartLocations,然后从那里拉出并添加到EndLocations

如果您注释掉第二行并运行代码,则可以看到这种情况发生:

document.getElementById("StartLocations").options.add(Opts);
//document.getElementById("EndLocations").options.add(Opts);

您需要创建两个不同的<option>元素,并分别附加每个元素。


行动中:

function getThevalues(data) {
    var optStart;
    var optEnd;

    for (var i = 1; i < data.d.length; i++) {
        optStart = document.createElement("option");
        optEnd= document.createElement("option");

        optStart.text = data.d[i].locName;
        optEnd.text = data.d[i].locName;

        document.getElementById("StartLocations").options.add(Opts);
        document.getElementById("EndLocations").options.add(Opts);
    }
}

答案 2 :(得分:0)

不需要行

MystartingLocation[i]["locName"] = {}
MystartingLocation[i]["locNode"] = {}

因为它会在对象中嵌套一个对象