how to dynamically add options to an existing select in vanilla javascript
JavascriptSelectJavascript Problem Overview
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 https://stackoverflow.com/questions/7340644/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.
Javascript Solutions
Solution 1 - Javascript
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');
Solution 2 - Javascript
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);
Solution 3 - Javascript
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:
Solution 4 - Javascript
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);
Solution 5 - Javascript
.add() also works.
var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(myOption);
Solution 6 - Javascript
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');
Solution 7 - Javascript
<html>
<head></head>
<body>
<select id="ddl"></select>
</body>
<script>
var ddl = $("#ddl");
ddl.empty();
ddl.append($("<option></option>").val("").html("--Select--"));
</script>
</html>