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
– Rory O'Kane, Commented Jul 18, 2013 at 17:54

Drew · Accepted Answer · 2013-07-18 17:56:10Z

130

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, 2013 at 17:56

Drew

4,3934 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

avorum Over a year ago

This suggestion managed to get my text to display properly whereas the other suggestions for some reason could not.

Rabb-bit Over a year ago

the best answer after searching through other stuffs

JorgeGarza Over a year ago

You can also use daySelect.options.add( new Option('Key','Value') )

A N Over a year ago

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

intuitivepixel · Accepted Answer · 2013-07-18 17:53:46Z

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, 2013 at 17:53

intuitivepixel

23.3k3 gold badges59 silver badges51 bronze badges

2 Comments

Lochemage Over a year ago

document.createElement("day") -> 'day' is not the proper tag name, you want 'option' instead.

avorum Over a year ago

Thank you everybody for your answers.

someOne · Accepted Answer · 2020-03-02 09:33:10Z

25

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 2, 2020 at 9:33

someOne

1,6752 gold badges14 silver badges20 bronze badges

answered Apr 28, 2019 at 22:41

user

26.2k13 gold badges118 silver badges104 bronze badges

1 Comment

Armando Contestabile Over a year ago

The cleanest way.

Lochemage · Accepted Answer · 2013-07-18 17:55:21Z

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, 2013 at 17:55

Lochemage

3,97413 silver badges11 bronze badges

Comments

Esteban Lezama · Accepted Answer · 2021-10-29 18:28:07Z

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, 2021 at 18:28

answered Jul 5, 2017 at 18:39

Esteban Lezama

495 bronze badges

1 Comment

Vbudo Over a year ago

daySelect.add(option); needs to be daySelect.add(myOption);

user28864 · Accepted Answer · 2014-07-10 20:17:21Z

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, 2014 at 20:17

answered Jul 10, 2014 at 16:36

user28864

3,4731 gold badge28 silver badges19 bronze badges

Comments

Tyler2P · Accepted Answer · 2021-03-13 07:28:39Z

-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, 2021 at 7:28

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Mar 12, 2021 at 12:54

user15382705

1

2 Comments

Tyler2P Over a year ago

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.

Quentin Over a year ago

This errors because you haven't defined $.

Collectives™ on Stack Overflow

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

7 Answers 7

4 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related