JavaScript

How to Add Option to Select Tag From Input Text Using JavaScript

While developing a website, there can be a requirement to add new options to the select element dynamically, which becomes challenging for beginners. In such a situation, you can utilize different JavaScript methods for the purpose of adding options to the select tag from the added input text. Don’t know how?

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:

add(option, existingOption);

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:

<input type="text" id="txt" placeholder="Enter text to add option">

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

functioninsertOption()
{
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:

appendChild(newOptionValue);

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:

<input type="text" id="txt" placeholder="Enter text to add option">

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

functioninsertOption()
{
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.

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.