Open In App

How to add options to a select element using jQuery?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will discuss some methods of dynamically adding the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below:

By passing the HTML of the option tag to the append() method

The option to be added is created like a normal HTML string. The select box is selected with the jQuery selector and this option is added using the append() method. The append() method inserts the specified content as the last child of the jQuery collection. Hence the option is added to the select element.

Syntax:

$('#selectBox').append(optionHTML)

Example: The below example will explain how you can pass the HTML of the option tag to the append() method to add dynamic option.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Adding options to a select element using jQuery?
    </title>
</head>
 
<body>
    <center>
        <h1 style="color: green">
            GeeksForGeeks
        </h1>
        <b>
            Adding options to a select element using jQuery?
        </b>
        <p>
            Select one from the given options:
            <select id="select1">
                <option value="free">Free</option>
                <option value="basic">Basic</option>
            </select>
        </p>
        <p>
            Click the button below to add
            one option to the select box.
        </p>
 
        <button onclick="addOption()">
            Add option
        </button>
    </center>
    <script src=
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer">
      </script>
    <script type="text/javascript">
        function addOption() {
            optionText = 'Premium';
            optionValue = 'premium';
            let optionHTML = `
            <option value="${optionValue}">
                ${optionText}
            </option>`;
            $('#select1').append(optionHTML);
        }
    </script>
</body>
 
</html>


Output:

optionGIF

Using the Option() constructor to create a new option

The Option() constructor can be used to create a new option element. A new option is created with the text and the value passed as the parameters. This element is then added to the select box with the append() method.

Syntax:

$('#selectBox').append(new Option(optionText, optionValue))

Example: This example shows the use of the Option() constructor to create the new option tag dynamically.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
          Adding options to a select
          element using jQuery?
      </title>
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksForGeeks</h1>
        <b>
              Adding options to a select element using jQuery?
          </b>
        <p>
            Select one from the given options:
            <select id="select1">
                <option value="free">Free</option>
                <option value="basic">Basic</option>
            </select>
        </p>
        <p>
              Click the button below to add one
              option to the select box.
          </p>
        <button onclick="addOption()">Add option</button>
    </center>
    <script src=
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer">
      </script>
    <script type="text/javascript">
        function addOption() {
            optionText = 'Premium';
            optionValue = 'premium';
            $('#select1')
                  .append(new Option(optionText, optionValue));
        }
    </script>
</body>
 
</html>


Output:

optionGIF

Creating a new option element with the value and the text

A new jQuery DOM element is created with the option tag. The value of the tag is set with the val() method and the text of the option is set with the text() method. The element created is then added to the select box with the append() method.

Syntax:

$('#selectBox').append($('<option>').val(optionValue).text(optionText))

Example: The below example illustrate the use of the val() and text() methods of jQuery to add option tag dynamically.

html




<!DOCTYPE html>
 
<head>
    <title>
          Adding options to a select element using jQuery?
      </title>
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksForGeeks</h1>
        <b>
              Adding options to a select element
              using jQuery?
          </b>
        <p>
            Select one from the given options:
            <select id="select1">
                <option value="free">Free</option>
                <option value="basic">Basic</option>
            </select>
        </p>
        <p>
              Click the button below to add one
              option to the select box.
          </p>
        <button onclick="addOption()">Add option</button>
    </center>
    <script src=
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        function addOption() {
            optionText = 'Premium';
            optionValue = 'premium';
            $('#select1').append($('<option>')
                .val(optionValue).text(optionText));
        }
    </script>
</body>
 
</html>


Output:

optionGIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads