Filling up muliple drop Downs with one array

Question

hello guys i have a simple problem the has me stumped. i really dont know what do do. I have a function like so.

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


     }
 }

I'm trying to fill both the start location and the endlocation drop down list with the same values yet every attempt that i have try only fills one of them the endlocation one. What I'm i doing wrong? can someone please point me in the right direction. Thanks Miguel

Answer 1

You can't add the same element to both places in the document.

You need to either create two option elements or clone the one you have.

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

---

Using two option elements would look like this:

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

Answer 2

You're taking the same child, and moving it.

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

The Opts variable is added to StartLocations and then pulled from there and added to EndLocations .

You can see this happening if you comment out the second line, and run your code:

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

You need to create two different <option> elements, and attach each individually.

---

In action:

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

Answer 3

No need for the lines

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

because it will be nesting an object inside an object