CODEWITHSUNDEEP
javascripthtml
user2430661
user2430661

Reputation: 41

How do i properly populate a dropdown list in JavaScript?

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

Upvotes: 1

Views: 283

Answers (3)

jlewkovich
jlewkovich

Reputation: 2775

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>

Upvotes: 1

Thierry J
Thierry J

Reputation: 2189

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

Upvotes: 0

Joseph Lennox
Joseph Lennox

Reputation: 3249

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!

Upvotes: 0

Related Questions