Scribd Logo
Upload

Welcome to Scribd!

  • 43 views

    Add Item To Dropdown List in HTML Using Javascript: Sign Up Log in Tour Help

    Uploaded by

    armando san
    The user was trying to populate a dropdown menu on page load by adding options with JavaScript, but it was not working. Several responders explained that the function needs to be called on page load by wrapping it in window.onload or adding it to the body onload event. Other improvements suggested were using a for loop to add all options at once for better performance, and using a document fragment to avoid unnecessary redraws when adding each option.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Add Item To Dropdown List in HTML Using Javascript: Sign Up Log in Tour Help

    Uploaded by

    armando san
    43 views3 pages
    The user was trying to populate a dropdown menu on page load by adding options with JavaScript, but it was not working. Several responders explained that the function needs to be called on page load by wrapping it in window.onload or adding it to the body onload event. Other improvements suggested were using a for loop to add all options at once for better performance, and using a document fragment to avoid unnecessary redraws when adding each option.

    Original Description:

    codigo de dropdownlist

    Original Title

    dropdown ejemplo

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The user was trying to populate a dropdown menu on page load by adding options with JavaScript, but it was not working. Several responders explained that the function needs to be called on page load by wrapping it in window.onload or adding it to the body onload event. Other improvements suggested were using a for loop to add all options at once for better performance, and using a document fragment to avoid unnecessary redraws when adding each option.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    43 views3 pages

    Add Item To Dropdown List in HTML Using Javascript: Sign Up Log in Tour Help

    Uploaded by

    armando san
    The user was trying to populate a dropdown menu on page load by adding options with JavaScript, but it was not working. Several responders explained that the function needs to be called on page load by wrapping it in window.onload or adding it to the body onload event. Other improvements suggested were using a for loop to add all options at once for better performance, and using a document fragment to avoid unnecessary redraws when adding each option.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 3

    add item to dropdown list in html using javascript - Stack Overflow Página 1 de 3

    sign up log in tour help

    Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute: Sign up ×

    add item to dropdown list in html using javascript

    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>

    javascript html

    edited Aug 24 '13 at 9:46 asked Aug 24 '13 at 9:38


    Oyindamola 'Funmi Oni
    28 1 1 4

    possible duplicate of how do I add an option to a html form dropdown list with javascript – Hashem Qolami
    Aug 24 '13 at 9:40

    @HashemQolami I do not have a button and hence I am confused on where to put the function.
    – Oyindamola 'Funmi Oni Aug 24 '13 at 9:48

    5 Answers

    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 '13 at 10:05 answered Aug 24 '13 at 9:50


    Kabie
    6,187 1 14 31

    http://stackoverflow.com/questions/18417114/add-item-to-dropdown-list-in-html-using-j... 04/01/2016
    add item to dropdown list in html using javascript - Stack Overflow Página 2 de 3

    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 '15 at 9:00 answered Mar 11 '15 at 13:53


    Stefan Steiger
    21.4k 32 159 265

    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 '13 at 9:51


    mithunsatheesh
    13.4k 6 36 67

    Try this:

    select.appendChild
    (option);

    answered Aug 24 '13 at 9:54


    Alex
    5,262 6 25 40

    Try this

    http://stackoverflow.com/questions/18417114/add-item-to-dropdown-list-in-html-using-j... 04/01/2016
    add item to dropdown list in html using javascript - Stack Overflow Página 3 de 3

    <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 '14 at 10:59


    Golda
    779 1 15 34

    http://stackoverflow.com/questions/18417114/add-item-to-dropdown-list-in-html-using-j... 04/01/2016

    You might also like