How to Add Options to Select With JavaScript

Anika Tabassum Era Feb 02, 2024
  1. Create option Tag and Append to Select in JavaScript
  2. Use Option Constructor to Add New Options in JavaScript
  3. Use jQuery DOM Element to Add New Options in JavaScript
How to Add Options to Select With JavaScript

Generally, options of a select element can be manually arranged.

But having many options and the lack of dynamically handling of the categories can make issues in the manual case. In this regard, the JavaScript methods of creating new options and modifying them on demand are much more acceptable.

We will demonstrate three ways of adding new options to the select element. Firstly, we will create an option element manipulating the DOM and adding text and value to storing the object.

Later, we will append the object to the select-id. Another way is to initiate an option constructor and add the necessary text and value.

We will display the work by appending it to the select element object. And lastly, create a jQuery Dom element and append it to select.

Create option Tag and Append to Select in JavaScript

We will declare an instance (x) for the select and create an object option to the element option. Next, we will assign text and value to the object.

Let’s see the code lines for better understanding.

Code Snippet:

<!DOCTYPE html>
<html>
<body>
  <select id="mySelect" size="3">
    <option value="hair">Hair</option>
    <option value="nose">Nose</option>
  </select>
&nbsp;
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
  var x = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.value = "hand";
  console.log(option.value);
  option.text = "Hand";
  x.add(option);
}
</script>
</body>
</html>

Output:

option append to select in javascript

So, the last command of the scripted tag has x.add(option), which implies joining the new option to the select. Here, you can use append and appendChild instead of add, which will work just fine.

Use Option Constructor to Add New Options in JavaScript

The following example only requires a constructor Option to create a new slot for a new option.

The Option constructor takes only two parameters. Firstly, it takes the text value then the value attribute’s input.

Code Snippet:

<!DOCTYPE html>
<html>
<body>
  <select id="mySelect" size="3">
    <option value="hair">Hair</option>
    <option value="nose">Nose</option>
  </select>
&nbsp;
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
  var x = document.getElementById("mySelect");
  var option = new Option("Hand", "hand");
  console.log(option.value);
  x.appendChild(option);
}
</script>
</body>
</html>

Output:

option constructor in javascript

Use jQuery DOM Element to Add New Options in JavaScript

The jQuery DOM element fires up the option tag, and later the .val and .text are used to define the text and value. Then we append it to the select-id.

Code Snippet:

<!DOCTYPE html>
<html>
<body>
  <select id="mySelect" size="3">
    <option value="hair">Hair</option>
    <option value="nose">Nose</option>
  </select>
&nbsp;
<button type="button" onclick="myF()">Add New Option</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
function myF() {
  $('#mySelect').append($('<option>').val('head').text('Head'));
}
</script>
</body>
</html>

Output:

jquery option

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Related Article - JavaScript Select