Add item to dropdown list in HTML using JavaScript

Question

I have this JavaScript+HTML to populate a dropdown menu but it is not working, am i doing anything wrong? Note I want the drop down menu to be filled on page Load

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function addList(){
    var select = document.getElementById("year");
    for(var i = 2011; i >= 1900; --i) {
    var option = document.createElement('option');
    option.text = option.value = i;
    select.add(option, 0);
      }
     }
    </script>
    </head>

    <body>

       <select id="year" name="year"></select>
      
    </body>
    </html>

possible duplicate of how do I add an option to a html form dropdown list with javascript — Hashem Qolami
– Hashem Qolami, Commented Aug 24, 2013 at 9:40
@HashemQolami I do not have a button and hence I am confused on where to put the function. — Oyindamola 'Funmi Oni
– Oyindamola 'Funmi Oni, Commented Aug 24, 2013 at 9:48

Kabie · Accepted Answer · 2013-08-24 10:05:31Z

32

Since your script is in <head>, you need to wrap it in window.onload:

window.onload = function () {
    var select = document.getElementById("year");
    for(var i = 2011; i >= 1900; --i) {
        var option = document.createElement('option');
        option.text = option.value = i;
        select.add(option, 0);
    }
};

You can also do it in this way

<body onload="addList()">

edited Aug 24, 2013 at 10:05

answered Aug 24, 2013 at 9:50

Kabie

10.7k1 gold badge40 silver badges47 bronze badges

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

Comments

Stefan Steiger · Accepted Answer · 2015-07-17 09:00:52Z

16

For higher performance, I recommend this:

var select = document.getElementById("year");
var options = [];
var option = document.createElement('option');

//for (var i = 2011; i >= 1900; --i)
for (var i = 1900; i < 2012; ++i)
{
    //var data = '<option value="' + escapeHTML(i) +'">" + escapeHTML(i) + "</option>';
    option.text = option.value = i;
    options.push(option.outerHTML);
}

select.insertAdjacentHTML('beforeEnd', options.join('\n'));

This avoids a redraw after each appendChild, which speeds up the process considerably, especially for a larger number of options.

Optional for generating the string by hand:

function escapeHTML(str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

However, I would not use these kind of methods at all.
It seems crude. You best do this with a documentFragment:

var docfrag = document.createDocumentFragment();

for (var i = 1900; i < 2012; ++i)
{
     docfrag.appendChild(new Option(i, i));
}

var select = document.getElementById("year");
select.appendChild(docfrag);

edited Jul 17, 2015 at 9:00

answered Mar 11, 2015 at 13:53

Stefan Steiger

83k70 gold badges405 silver badges461 bronze badges

1 Comment

Eli Over a year ago

How about if I just want to replace the value instead of appending? How would I do that?

Golda · Accepted Answer · 2014-02-06 10:59:17Z

1

Try this

<script type="text/javascript">
    function AddItem()
    {
        // Create an Option object       
        var opt = document.createElement("option");        

        // Assign text and value to Option object
        opt.text = "New Value";
        opt.value = "New Value";

        // Add an Option object to Drop Down List Box
        document.getElementById('<%=DropDownList.ClientID%>').options.add(opt);
    }
<script />

The Value will append to the drop down list.

answered Feb 6, 2014 at 10:59

Golda

3,89110 gold badges39 silver badges67 bronze badges

1 Comment

Bbb Over a year ago

This actually worked! The other examples did not. Thank you! (implementation here:) if ($("#MainContent_ddlFilterFieldKey").val() == "Date Time") {// Create an Option object var opt = document.createElement("option"); // Assign text and value to Option object opt.text = "New Value"; opt.value = "New Value"; // Add an Option object to Drop Down List Box document.getElementById('MainContent_ddlFilterBooleanOption').options.add(opt); }

Tomasz Mularczyk · Accepted Answer · 2019-01-12 18:28:05Z

1

Try to use appendChild method:

select.appendChild(option);

edited Jan 12, 2019 at 18:28

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

answered Aug 24, 2013 at 9:54

Alex

12.5k7 gold badges47 silver badges52 bronze badges

Comments

Mithun Satheesh · Accepted Answer · 2013-08-24 09:51:46Z

0

i think you have only defined the function. you are not triggering it anywhere.

please do

window.onload = addList();

or trigger it on some other event

after its definition

see this fiddle

answered Aug 24, 2013 at 9:51

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

Collectives™ on Stack Overflow

Add item to dropdown list in HTML using JavaScript

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related