In this article I will explain with an example, how to dynamically add (insert) Items (Options) to DropDownList i.e. HTML Select element on Button click using JavaScript.
The Items (Options) Text and Value parts will be dynamically fetched from TextBoxes and then the Items (Options) will be added to HTML DropDownList using plain JavaScript.
HTML Markup
The following HTML Markup consists of an HTML DropDownList i.e. HTML Select element, two HTML TextBoxes and a Button. The Button has been assigned a JavaScript Click event handler.
<select id = "ddlFruits"></select>
<hr />
Text: <input type="text" id = "txtText" />
Value: <input type="text" id = "txtValue" />
<input type="button" id = "btnAdd" value = "Add" onclick = "Add()" />
JavaScript function to add (insert) Items (Options) to HTML DropDownList on Button Click
When the Button is clicked, the Add JavaScript function is called. Inside the JavaScript function, first the HTML DropDownList is referenced and then an HTML Option element is created.
The Text part is set using the innerHTML property while the Value part is set using the value property of the HTML Option element.
Finally the HTML Option is added to the HTML DropDownList.
<script type="text/javascript">
function Add() {
var ddl = document.getElementById("ddlFruits");
var option = document.createElement("OPTION");
option.innerHTML = document.getElementById("txtText").value;
option.value = document.getElementById("txtValue").value;
ddl.options.add(option);
}
</script>
Screenshot
![Add (Insert) Items (Options) to DropDownList on Button click using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
