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       lt  DOCTYPE html gt       lt html gt       lt head gt       lt script gt      function addList        var select   document getElementById  year        for var i   2011  i  gt   1900  --i        var option   document createElement  option        option text   option value   i      select add option  0                       lt  script gt       lt  head gt        lt body gt           lt select id  year  name  year  gt  lt  select gt        lt  body gt       lt  html gt

User · Answer

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

User · Answer

Since your script is in  lt head gt   you need to wrap it in window onload   window onload   function          var select   document getElementById  year        for var i   2011  i  gt   1900  --i            var option   document createElement  option            option text   option value   i          select add option  0              You can also do it in this way   lt body onload  addList    gt

User · Answer

For higher performance  I recommend this   var select   document getElementById  year    var options       var option   document createElement  option       for  var i   2011  i  gt   1900  --i  for  var i   1900  i  lt  2012    i          var data     lt option value      escapeHTML i      gt     escapeHTML i      lt  option gt        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  lt  2012    i         docfrag appendChild new Option i  i       var select   document getElementById  year    select appendChild docfrag

User · Answer

Try to use appendChild method   select appendChild option

User · Answer

Try this    lt script type  text javascript  gt      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   lt   DropDownList ClientID  gt    options add opt          lt script   gt    The Value will append to the drop down list

[javascript] add item to dropdown list in html using javascript

Examples related to javascript

Examples related to html