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 += "<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.

Yes, the single quotes aren't just unnecessary, they're a syntax error in HTML. — Rory O'Kane, Jul 18 '13 at 17:54

score 122 · Accepted Answer · answered Jul 18 '13 at 17:56

122

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

answered Jul 18 '13 at 17:56

Drew

4,215
3
26
40

2

This suggestion managed to get my text to display properly whereas the other suggestions for some reason could not. – avorum Jul 18 '13 at 19:14
1

the best answer after searching through other stuffs – Rabb-bit Apr 08 '16 at 12:43
13

You can also use `daySelect.options.add( new Option('Key','Value') )` – JorgeGarza Jun 15 '17 at 03: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 '19 at 18:27

score 26 · Answer 2 · answered Jul 18 '13 at 17:53

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

answered Jul 18 '13 at 17:53

intuitivepixel

23,302
3
57
51

document.createElement("day") -> 'day' is not the proper tag name, you want 'option' instead. – Lochemage Jul 18 '13 at 17:57
Thank you everybody for your answers. – avorum Jul 18 '13 at 18:06

score 20 · Answer 3 · edited Mar 02 '20 at 09:33

20

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:

edited Mar 02 '20 at 09:33

someOne

1,975
2
14
20

answered Apr 28 '19 at 22:41

user

23,260
9
113
101

The cleanest way. – Armando Contestabile Jul 12 '23 at 13:01

score 5 · Answer 4 · answered Jul 18 '13 at 17:55

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

answered Jul 18 '13 at 17:55

Lochemage

3,974
11
11

Esteban Lezama · Answer 5 · 2021-10-29T18:28:07.777

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

edited Oct 29 '21 at 18:28

answered Jul 05 '17 at 18:39

Esteban Lezama

41
4

2

daySelect.add(option); needs to be daySelect.add(myOption); – Vbudo May 09 '21 at 03:36

user28864 · Answer 6 · 2014-07-10T20:17:21.493

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

edited Jul 10 '14 at 20:17

answered Jul 10 '14 at 16:36

user28864

3,375
1
25
19

score -1 · Answer 7 · edited Mar 13 '21 at 07:28

-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>

edited Mar 13 '21 at 07:28

Tyler2P

2,324
26
22
31

answered Mar 12 '21 at 12:54

user15382705

1

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 '21 at 16:06
This errors because you haven't defined `$`. – Quentin Jun 09 '22 at 09:44

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

7 Answers7

Linked

Related