What is the best way to add options to a select from a JavaScript object with jQuery?

In this tutorial, we'll discuss how to add more options to an already given select from a JavaScript object using jQuery?
Submitted by Pratishtha Saxena, on June 17, 2022

jQuery is a JavaScript library used to simplify HTML DOM tree traversal and manipulation, and event handling. It is free, open-source software and easy to use.

Now, suppose a drop-down has already been created with some values and text inside its option tag. If more options had to be inserted in that drop-down then following are the ways to do that.

The best way to do this is by using append() method of jQuery. It is very easy to understand and easy to use. As the name suggests, this method will append the specified value to the selected HTML element.

Syntax:

$(selector).append(content,function(index,html))

The content specified within will be added to the selector. The function is optional, but can be written such that it returns the content that has to be inserted.

To create a new option for the select tag, jQuery uses new Option() method. It creates a new option that has to be inserted with its value and text. This new option is then append into the select element.

Note: Always remember to apply the CDN link while working with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Example 1:

HTML Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <center>
         <h2>
            Drop-Down List<br>
            <select name="mySelection" id="selectCategory">
               <option value="First Value">First</option>
               <option value="Second Value">Second</option>
            </select>
         </h2>
      </center>
   </body>
</html>

jQuery Function:

<script>
    var mySelection = new Option("Third Value", "Third");
    $(mySelection).html("Third");
    $("#selectCategory").append(mySelection);
</script>

Output:

Here a new option has been created and then inserted to the drop-down. This can also be done through creating a function which inserts/appends the new text and value respectively.

Example 2:

HTML Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <center>
         <h2>
            Drop-Down List<br>
            <select name="mySelection" id="selectCategory">
               <option value="First Value">First</option>
               <option value="Second Value">Second</option>
            </select>
         </h2>
      </center>
   </body>
</html>

jQuery Function:

<script>
    function addOption() {
        text = 'Third';
        value = 'Third Value';
        $('#selectCategory').append(new Option(text, value));
    }
    addOption();
</script>

Output:

In the above example, option() is used as a constructor. It accepts text and value as its parameters and then is added, i.e., append into the drop-down.

So, these are the best ways to add more options to a select tag in jQuery.

How can I select an element by name with jQuery?

How to change the href attribute for a hyperlink using jQuery?

Related Examples

Comments and Discussions!

Load comments ↻