Fill a <select> using JavaScript

Question

So I want to add a dropdown in my form that will display numbers from 1 to 999 . I have tried to do it using JS but it doesn't work Here is what I have tried so far :

<html>
<head>
<script>
window.onload = fillDropDown(); 

function fillDropDown() { 
var ddl = document.getElementById( 'myDropdown' ); 
var theOption = new Option; 
var x; 
var i; 

for(i = 0; i < 999; i++) { 
x = i + 1; 
theOption.text = x; 
theOption.value = x; 
ddl.options[i] = theOption; 
} 
} 
</script>
</head>
<body>
<form id="myForm"> 
<select id="myDropdown"></select> 
</form>
</body>

But it doesn't work . Here is a jsfiddle example http://jsfiddle.net/j3nLxptn/

Totò · Accepted Answer · 2014-08-24 23:54:00Z

3

It works if you instantiate the option inside the loop:

 for (i = 0; i < 999; i++) {
        var theOption = new Option;
        x = i + 1;
        theOption.text = x;
        theOption.value = x;
        ddl.options[i] = theOption;
    }

See http://jsfiddle.net/j3nLxptn/1/

answered Aug 24, 2014 at 23:54

Totò

1,85415 silver badges21 bronze badges

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

Comments

plalx · Accepted Answer · 2014-08-25 00:54:35Z

0

The issue is that you are always reusing the same option element. You have to create a new Option instance at every iteration and that you can use add to actually append select options.

Also note that the Option constructor can take text and value parameters.

for (i = 0; i < 999; i++) {
    x = i + 1;
    ddl.add(new Option(x, x), null);
}

answered Aug 25, 2014 at 0:54

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Collectives™ on Stack Overflow

Fill a <select> using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related