Home/ Questions/Q 7874787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T02:52:15+00:00

I want to fill a dropdown list and I’ve written the following code: <script

  • 0

I want to fill a dropdown list and I’ve written the following code: 

<script language="JavaScript1.2">
window.onload = fillDropDown();

function fillDropDown() {

        var ddl = document.getElementById("dia");
    var theOption = new Option;
    var x;
    var i;

    for(i = 1; i < 32; i++) {
        x = i + 1;
        theOption.text = x;
        theOption.value = x;
        ddl.options[i] = theOption;
    }


}

</script>
   <body>
    <form>
           <select id=dia></select>
    </form>
   <body>

It isn’t working, any idea why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have some errors in your code.

    1. The first common mistake is the following: 

    window.onload = fillDropDown();

    This previous code is registering the result of the called function fillDropDown and then assigning its results into window.onload. Thus, this will never do something. To register an event you have to assign a function not the result of a called function. The difference is this:

    window.onload = fillDropDown; // Without the parentheses.

    2. Another mistake I found, is about the creation of the option element. The better way to create HTML element in JavaScript is using the almost-standard document.createElement function.

    3. Also your HTML markup has an error. Your select is written: <select id=dia></dia> and it should be <select id="dia"></select>;

    So, with all theses changes highlighted the resulting code will be like this:

    window.onload = fillDropDown;

function fillDropDown() {

    var ddl = document.getElementById("dia");
    var theOption;
    var x;
    var i;

    for (i = 1; i < 32; i++) {
        x = i + 1;
        theOption = document.createElement('option');
        theOption.label = x;
        theOption.value = x;
        ddl.add(theOption, null);
    }


}​

    And it works like a charm. You can see it in action in this live demo: http://jsfiddle.net/dyjLS/

    Note: I highly recommend to use a JavaScript library such as jQuery to do this, since it will deal with almost all the cross-browser inconsistencies. If you use it, your code will look like the following:

    <script type="text/javascript">
  jQuery( document ).ready( function($) {
    var $select = $('#dia');
    for ( var i = 1 ; i < 32 ; i++) {
      var x = i + 1;
      $select.append('<option value='+ x +'>'+ x +'</option>');
    }
  });
</script>

    ¡Voilà!

    • 0