CODEWITHSUNDEEP
javascripthtml
Miguel
Miguel

Reputation: 2079

Filling up muliple drop Downs with one array

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

Upvotes: 0

Views: 43

Answers (3)

Nathan Wall
Nathan Wall

Reputation: 10614

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

Upvotes: 3

Ben
Ben

Reputation: 57209

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

Upvotes: 3

Atif
Atif

Reputation: 10880

No need for the lines

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

because it will be nesting an object inside an object

Upvotes: 0

Related Questions