This tutorial will define the procedure to add an option from an input text to a select tag using JavaScript.
How to Add Option to Select Tag From Input Text Using JavaScript?
To add an option from an input text to a select tag using JavaScript, you can use different methods, such as:
Let’s explore each method one by one!
Method 1: Add Option to Select Tag From Input Text Using add() Method with Option Constructor
For adding an option from the input text in a select tag, use the “add()” method with “Option” Constructor. The add() method is used to add the elements to the options of the “HTMLSelectElement” also known as <select> tag. It takes two parameters as arguments.
Syntax
Follow the provided syntax to use the add() method for adding an option in a select tag:
Here, the “option” represents the new option that is going to be added in place of the “existingOption”.
Example
We will create an input field, a drop-down menu using <select> tag and a button that will add new options in a select element, invoking the “insertOption()” function when it is clicked:
<select id="options">
<option value="c">C</option>
</select>
<br><br>
<button id="add btn" onclick="insertOption()">Add Option</button>
In the JS file, define a function named “insertOption()” and then access the button, textbox, and the select element with their assigned id’s using the “querySelector()” method. Then, create an instance of the option using the Option constructor, and call the add() method by passing the existing option and the new option that needs to be added at the end of the list:
{
const addBtn = document.querySelector('#addbtn');
const listbox = document.querySelector('#options');
const dropdown = document.querySelector('#txt');
const option = new Option(dropdown.value, dropdown.value);
listbox.add(option, undefined);
dropdown.value = '';
dropdown.focus();
}
The output shows that the new option from the text field is added at the end of the drop-down menu:
Note: You can use this method to add the option at the beginning of the select tag by adding the value of the existing option as a second parameter instead of undefined. It will add the new option before the existing one.
Let’s move to the other method!
Method 2: Add Option to Select Tag From Input Text Using createElement() With appendChild() Method
There is another approach using which you can create a new element using the “createElement()” method with the “appendChild()” method. By using this methodology, we will add the options at the beginning of the select tag.
Syntax
Use the following syntax for adding option in select tag from the input text using appendChild() method:
Example
Here, we will create a dropdown list by adding two options “C” and “C++”, an input field and a button that will call the user-defined JavaScript function named “insertOption()” when its onclick event is triggered:
<select id="dropdown">
<option>C</option>
<option>C++</option>
</select>
<br><br>
<button onclick="insertOption();">Add Option</button>
In a function named “insertOption()”, first access the select element and the text field using their assigned id’s and then, call the createElement() and createTextNode() methods for creating an option instance and fetch the text value as an option. After that, call the appendChild() method and pass the text value as an option then, add this option at the beginning of select list using “insertBefore()” method with select element:
{
var select = document.getElementById("dropdown"),
textValue = document.getElementById("txt").value,
newOption = document.createElement("Option"),
newOptionValue = document.createTextNode(textValue);
newOption.appendChild(newOptionValue);
select.insertBefore(newOption, select.firstChild);
}
As you can see that the output shows that the new option from the text field is added at the start of the drop-down menu:
We have compiled all the possible solutions for adding options from an input text to the select tag.
Conclusion
To add an option from an input text to a select tag using JavaScript, you can use the JavaScript built-in methods, including add() method or appendChild() method. You can add options in a select tag at the beginning of the list as well as the end of the list. In this tutorial, we have defined the procedure to add an option from an input text to a select tag using JavaScript with detailed examples.
