Select box won't populate with javascript

Question

I am using javascript to populate a select box in my page but its not working, the select box displays but its completely empty.

I also get no error in my console.

My script is this:

        var select = document.createElement("select");
            for(var i in resource){
                if(i !== id && select.hasOwnProperty(i)){
                    select.setAttribute(i, resource[i].name);
                }
            }
            d.appendChild(select);

Example data for resource:

{
 "1":{"name":"Test"},
 "2":{"name":"Test2"},
 "3":{"name":"Test3"}
}

Any ideas on why it won't populate?

What are you expecting that to do? If you want those to be options in your drop-down you have to create option elements? What do 'name' and 'type' correspond to? — nbrooks
– nbrooks, Commented May 7, 2013 at 2:43
Those are just object properties I'm using to populate the select box. Well not type - ignore that property of the object. — Sir
– Sir, Commented May 7, 2013 at 2:44
OK, but what do they correspond to in terms of your drop-down. Is 'name' the text which is displayed for each option in the list? — nbrooks
– nbrooks, Commented May 7, 2013 at 2:45
Yes and the the i will be the object such as resource[1] etc — Sir
– Sir, Commented May 7, 2013 at 2:45

Arun P Johny · Accepted Answer · 2013-05-07 02:57:42Z

8

There are quite few mistakes in your script, many are mentioned in the comments as you can see.

What you are looking for might be something like this

var select = document.createElement("select");
for(var i in resource){
    if(resource.hasOwnProperty(i)){ //removed the i !== id condition, you may put it back
        var opt = new Option(resource[i].name, i);
        select.options[select.options.length] = opt;
    }
}
document.body.appendChild(select);

Demo: Fiddle

edited May 7, 2013 at 2:57

answered May 7, 2013 at 2:48

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

17 Comments

razz Over a year ago

this must be a typo i guess.. opt should be Option(resource[i].name, i) first parameter is for text and second for value!

Arun P Johny Over a year ago

@razzak yes, in the fiddle it was corrected forgot to copy here

Sir Over a year ago

Ah i see so when does setAttribute get used for anything ?

Sir Over a year ago

Should also mention shouldn't resource.hasOwnProperty(i) be !resource.hasOwnProperty(i)

Sir Over a year ago

@ArunPJohny if it has its own property then it should skip rather than make it again surely?

|

Eric S · Accepted Answer · 2013-05-07 02:51:35Z

1

You need to create child elements of the select, that are option tags.

Here's a sample JSFiddle.

edited May 7, 2013 at 2:51

answered May 7, 2013 at 2:41

Eric S

1,3631 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Select box won't populate with javascript

2 Answers 2

17 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related