70

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 += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

After I did this there was no change to the select and the alert gave me

HELLO WORLD</option'>

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.

3
  • Those single quotes after "option" aren't needed. Jul 18, 2013 at 17:52
  • 1
    should be "<option>Hello world</option>"
    – mkoryak
    Jul 18, 2013 at 17:53
  • Yes, the single quotes aren't just unnecessary, they're a syntax error in HTML. Jul 18, 2013 at 17:54

7 Answers 7

124

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');
4
  • 2
    This suggestion managed to get my text to display properly whereas the other suggestions for some reason could not.
    – avorum
    Jul 18, 2013 at 19:14
  • 1
    the best answer after searching through other stuffs
    – Rabb-bit
    Apr 8, 2016 at 12:43
  • 14
    You can also use daySelect.options.add( new Option('Key','Value') )
    – JorgeGarza
    Jun 15, 2017 at 3:49
  • For me I had to set the length of the options first and then add the options. It would not add the options otherwise. deleteSelect.options.length = 2; deleteSelect.options[0] = new Option(messageResources.True, "true"); deleteSelect.options[0] = new Option(messageResources.False, "false");
    – A N
    Jan 30, 2019 at 18:27
26

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);
2
  • document.createElement("day") -> 'day' is not the proper tag name, you want 'option' instead.
    – Lochemage
    Jul 18, 2013 at 17:57
  • Thank you everybody for your answers.
    – avorum
    Jul 18, 2013 at 18:06
23

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:

1
5

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);
4

.add() also works.

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(myOption);

W3 School - try

1
  • 2
    daySelect.add(option); needs to be daySelect.add(myOption);
    – Vbudo
    May 9, 2021 at 3:36
0

Try this;

   var data = "";
   data = "<option value = Some value> Some Option </option>";         
   options = [];
   options.push(data);
   select = document.getElementById("drop_down_id");
   select.innerHTML = optionsHTML.join('\n'); 
-1
<html>
    <head></head>
    <body>
        <select id="ddl"></select>
    </body>
    <script>
        var ddl = $("#ddl");
        ddl.empty();
        ddl.append($("<option></option>").val("").html("--Select--"));
    </script>
</html>
2
  • 1
    Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.
    – Tyler2P
    Mar 12, 2021 at 16:06
  • This errors because you haven't defined $.
    – Quentin
    Jun 9, 2022 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.