populating html with javascript array

Question

I am trying to populate html select with javascript array, can you guys help me make this one work below are my codes

external javascript (I have found this code somewhere in the internet)

function setRuleName() 
{   var myCars=new Array("Saab","Volvo","BMW");

        var sel = document.getElementById("dropping") // find the drop down
        for (var i in myCars) 
        { // loop through all elements
            var opt = document.createElement("option"); // Create the new element
            opt.value = title[i]; // set the value
            opt.text = title[i]; // set the text
            sel.appendChild(opt); // add it to the select
        }

}

html code

<Select  onclick="setRuleName();" id="dropping" >

</Select>

You shouldn't call that function onclick, or it will append the options every time you click. — Skwal
– Skwal, Commented Feb 21, 2014 at 16:53
ashley your are alway helpful and alway hitting it up thanks very cheers! — user3287181
– user3287181, Commented Feb 21, 2014 at 16:57
guys anyone onclick is working but onload is not any idea? thanks. — user3287181
– user3287181, Commented Feb 21, 2014 at 17:14

tymeJV · Accepted Answer · 2014-02-21 16:38:04Z

2

Not sure where your title attribute came from, but when looping an array, use a standard for, not a for in

for (var i = 0; i < myCars.length; i++) {
    var opt = document.createElement("option"); // Create the new element
    opt.value = myCars[i]; // set the value
    opt.text = myCars[i]; // set the text
    sel.appendChild(opt); // add it to the select
}

answered Feb 21, 2014 at 16:38

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3287181 Over a year ago

yeah admitted it title is wrong, but bro it is still no working, just to add i have two external script wouldn't it making the problem thanks

user3287181 Over a year ago

no errors in the console and weird i remove the external file where it is located i transferred the code in the other external script and now all the scripts are not working.

tymeJV Over a year ago

Sounds like the problems are in the other script.

user3287181 Over a year ago

to update you up, it is already running, the problem now is that im using a onclick event so every time i click the items are added in my drop down list what event must i use so when it loaded all the files are loaded also thanks

cocco · Accepted Answer · 2014-02-21 16:45:38Z

1

Alternative ways to write this code.

function setRuleName(){

 var myCars=["Saab","Volvo","BMW"],
     sel=document.getElementById("dropping");

 for(var a=0,tit;tit=myCars[a];++a){
  var opt=document.createElement("option");
  opt.value=opt.textContent=tit;
  sel.appendChild(opt);
 }

}

For internal use (NO POST)

function setRuleName(){
 document.getElementById("dropping").innerHTML='<option>'+
 ["Saab","Volvo","BMW"].join('</option><option>')+
 '</option>';
}

to access the value :

console.log(document.getElementById("dropping").selected.textContent);

answered Feb 21, 2014 at 16:45

cocco

16.8k7 gold badges65 silver badges77 bronze badges

Collectives™ on Stack Overflow

populating html with javascript array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related