How to Add Options to a Select Element using jQuery

In this tutorial, we will find out the best method for adding options to a select element from a JavaScript object using jQuery. Let’s discuss each of the methods and try to solve the problem together.

The first method is appending the option tag to the select box. The option tag is created like an HTML string, and the select box is selected with the jQuery selector. The option is added with the append() method. This method inserts the specified content as the last child of the jQuery collection, thus adding the option to the select element.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <p>
      Select one of the proposed options:
      <select id="selectId">
        <option value="firstEl">First Element</option>
        <option value="secondEl">Second Element</option>
      </select>
    </p>
    <button onclick="addOption()">
      Add Element
    </button>
    <script type="text/javascript">
      function addOption() {
        optText = 'New elemenet';
        optValue = 'newElement';
        $('#selectId').append(`<option value="${optValue}">${optText}</option>`);
      }
    </script>
  </body>
</html>

The second method uses the Option() constructor for creating a new option. The Option() constructor is used to create a new option element. For creating a new option, the text and the value parameters are used. Then, the element is appended to the select box with the append() method:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <p>
      Select one of the proposed options:
      <select id="selectId">
        <option value="firstEl">First Element</option>
        <option value="secondEl">Second Element</option>
      </select>
    </p>
    <button onclick="addOption()">
      Add Element
    </button>
    <script type="text/javascript">
      function addOption() {
        optText = 'New Element';
        optValue = 'newElement';
        $('#selectId').append(new Option(optText, optValue));
      }
    </script>
  </body>
</html>

The third method is creating a new jQuery DOM element with the option tag. The value of the tag is specified with the val() method and the text with thetext() method. Here, also you should use the append() method to add the element to the select box.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <p>
      Select one of the proposed options:
      <select id="selectId">
        <option value="firstEl">First Element</option>
        <option value="secondEl">Second Element</option>
      </select>
    </p>
    <button onclick="addOption()">
      Add Element
    </button>
    <script type="text/javascript">
      function addOption() {
        optText = 'New element';
        optValue = 'newElement';
        $('#selectId')
          .append($('<option>').val(optValue).text(optText));
      }
    </script>
  </body>
</html>

The append() Method

The append() method inserts specified content at the end of the selected elements. The append() and appendTo() methods perform the same way. The difference between them is in the syntax-specifically, in the placement of the content and target. Use the prepend() method to insert the content at the beginning of the selected elements.

Do you find this helpful?

Related articles