how to dynamically add options to an existing select in vanilla javascript

Question

I d like to add option to a select dynamically using plain javascript   Everything I could find involves JQuery or tries to create the select dynamically as well   The closest thing I could find was Dynamically add input type select with options in Javascript which does the latter and was the only I found that doesn t involve JQuery   Although I did try and use it like so   daySelect   document getElementById  daySelect    daySelect innerHTML      lt option  gt Hello world lt  option  gt    alert daySelect innerHTML    After I did this there was no change to the select and the alert gave me   HELLO WORLD lt  option  gt    I apologize if this is simple but I m very new at javascript and web programming in general   Thank you for any assistance   EDIT  So I tried the given suggestions like so   daySelect   document getElementById  daySelect    myOption   document createElement  option    myOption text    Hello World   myOption value    Hello World   daySelect appendChild myOption     This has not changed the select in the page at all   Any idea why   And I did check that the code was being run with an alert   EDIT  The idea did work  it just turned out that it wasn t displaying a value in the dropdown   I don t know why but I can figure that one out I think

User · Accepted Answer

This tutorial shows exactly what you need to do: Add options to an HTML select box with javascript

Basically:

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');

User · Answer

Use the document createElement function and then add it as a child of your select   var newOption   document createElement  option    newOption text    the options text   newOption value    some value if you want it   daySelect appendChild newOption

User · Answer

add   also works   var daySelect   document getElementById  myDaySelect    var myOption   document createElement  option    myOption text    test   myOption value    value   daySelect add option     W3 School - try

User · Answer

I guess something like this would do the job   var option   document createElement  option    option text    Text   option value    myvalue   var select   document getElementById  daySelect    select appendChild option

User · Answer

Try this      var data          data     lt option value   Some value gt  Some Option  lt  option gt                options          options push data      select   document getElementById  drop down id       select innerHTML   optionsHTML join   n

User · Answer

The simplest way is   selectElement add new Option  Text    value       Yes  that simple  And it works even in IE8  And has other optional parameters   See docs    HTMLSelect Element  add item   before   new Option text  value  defaultSelected  selected

[javascript] how to dynamically add options to an existing select in vanilla javascript

Examples related to javascript

Examples related to select