September 11, 2021

How to Add Option to Select Tag from Input Text Using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to add option to select tag from input text using javascript. As you know, if you want to create a dropdown list then the select element is your best choice. You can add as many as options you want to the select element.

Things get a little bit tricky when you want to add more options dynamically to the select element. This is where javascript comes into play. In javascript, we have the createElement() method which we can use to create any HTML element and later append it to any existing HTML element in the DOM.

In the following example, we have one input field. We will simply enter a text in the input field and upon button click, we will create an option element with that value and append it right before the selected option in the dropdown list. Please have a look over the code example and steps given below.

HTML & CSS

We have a few elements in the HTML file (2 div, 1 select, 3 option, 1 input, and 1 button). The div element with a class of container is just a wrapper for the rest of the elements.

The inner text for the button element is “Add”.
As of now, we have only 3 options in the dropdown list. We will add more options using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  
  <div class="container">
    <div>
      <input type="text" placeholder="Enter Text">
      <button>Add</button>
    </div>
    <select>
      <option value="peter">Peter</option>
      <option value="james">James</option>
      <option value="mary">Mary</option>
    </select>
  </div>

  <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button, input {
    padding: 5px 20px;
    margin: 5px;
}

select{
    padding: 5px;
    margin-top: 10px;
    width: 22%; 
}

Javascript

We have selected button, input, and select elements using the document.querySelector() method and stored them in btnAdd, input, and select variables respectively.

We have attached the click event listener to the button element.
In the event handler function, we are using the createElement() method to create an option element and storing it in the option variable.
We are setting the value entered in the input field as the text of the option element and also changing the value to lowercase and setting it as the value of the option element.

We are using the selectedIndex property to get the index of the currently selected option and storing it in the currentIndex variable.
We are calling add() method of the select element and passing the newly created option and index of the currently selected option. As a result, it will append a new option right before the currently selected option in the dropdown list.
We are setting the value of the input element to an empty string.

let btnAdd = document.querySelector('button');
let input = document.querySelector('input');
let select = document.querySelector('select');

btnAdd.addEventListener('click', () =>{
    let option = document.createElement('option');
    option.value = input.value.toLowerCase();
    option.text = input.value;

    let currentIndex = select.options[select.selectedIndex];
    select.add(option, currentIndex);
    input.value = '';
});

You May Also Like: