How do i properly populate a dropdown list in JavaScript?

Question

I am trying to populate my dropdown list I had it working by entering each variable into the array manually however I would like to be able to add the the array using a loop.

Sorry I'm new to javascript

<select id="selectNumber">
    <option>Choose a number</option>
</select>

var select = document.getElementById("selectNumber");
var options = new Array(51);
var firstyear = ( new Date().getFullYear() ) - 17;
var temp = 0;

for ( var i = 0; i < 51; i++ ) {
    temp = firstyear - 1;
    options.push( temp );

    alert( temp );
}
alert ( options );

for ( var i = 0; i < options.length; i++ ) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild( el );
}

This is not Java; it's JavaScript. They are totally different languages. — Ted Hopp
– Ted Hopp, Commented Aug 28, 2013 at 3:42
You can use Jquery. newSelect.append($('<option/>', { value: index, text: "Text" — AFetter
– AFetter, Commented Aug 28, 2013 at 3:46
Here's a fun test I did 9 years ago investigating ways to do this in then-current browsers: phrogz.net/tmp/selectmanipulation.html — Phrogz
– Phrogz, Commented Aug 28, 2013 at 3:59

jlewkovich · Accepted Answer · 2013-08-28 14:22:47Z

1

I think this should work:

<select id="selectNumber">
    <option>Choose a number</option>
</select>

<script>
var select = document.getElementById("selectNumber");
var options = new Array();
var firstyear = (new Date().getFullYear()) - 17;
var temp = firstyear;

for(var i = 0; i < 51; i++) {
    options.push(temp);
    temp--;
    }

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.text = opt;
    el.value = opt;
    select.appendChild(el);
}
</script>

edited Aug 28, 2013 at 14:22

answered Aug 28, 2013 at 3:52

jlewkovich

2,7752 gold badges36 silver badges50 bronze badges

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

2 Comments

Thierry J Over a year ago

Beware though, depending on the speed of the browser, you might get some race conditions where the select is undefined.

RobG Over a year ago

You should be setting el.text, not el.textContent, as the text property reflects the text attribute, not textContent. And there are many browsers in use that don't implement textContent, but they all implement the text property.

Joseph Lennox · Accepted Answer · 2013-08-28 03:50:04Z

0

You were pretty close but you're missing a ")" character.

You have:

for(var i = 0; i < 51; i++ {

It should be:

for(var i = 0; i < 51; i++) {

To note: debug output for loops is often best done using console.log instead of alert. It'll show up the Javascript console on any browser but be careful about leaving them behind, as it'll break IE8 (maybe even 9+?) if they're left in there and the console is not presently open!

answered Aug 28, 2013 at 3:50

Joseph Lennox

3,2881 gold badge29 silver badges25 bronze badges

Comments

Thierry J · Accepted Answer · 2013-08-28 03:56:32Z

There are several small errors in your code:

You javascript code is run before the elements are created on the page, so document.getElementById("selectNumber"); is undefined when it is called. You need to enclose your code in a function that will be called once the document has been fully created.
If you initialise your array with var options = new Array(51); and then use options.push(...), you will have 50 empty values, and then the values you added. You need to change your initialisation to var options = new Array();
You forgot a ) in for(var i = 0; i < 51; i++ {
You need to change temp = firstyear - 1; to temp = firstyear - i; otherwise you will fill your array with 50 times the same value
One loop is enough to achieve this

Here is an updated version of your code with these problems fixed:

document.ready = function() {
    var select = document.getElementById("selectNumber");
    var options = new Array();
    var firstyear = (new Date().getFullYear()) - 17;

    for (var i = 0; i < 50; i++) {
        var date = firstyear - i;
        var el = document.createElement("option");
        el.textContent = date;
        el.value = date;
        select.appendChild(el);
    }
}

Collectives™ on Stack Overflow

How do i properly populate a dropdown list in JavaScript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related