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 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.

javascript add 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 element';
        optValue = 'newElement';
        $('#selectId').append(`<option value="${optValue}">${optText}</option>`);
      }
    </script>
  </body>
</html>

Try it Yourself »

The second method uses the <kbd>Option()</kbd> constructor to create a new option. Note that Option() is a native JavaScript/DOM constructor, not a jQuery method, but it works seamlessly with jQuery's <kbd>append()</kbd> method. For creating a new option, the text and value parameters are passed to the constructor. Then, the element is appended to the select box:

javascript add 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 Element';
        optValue = 'newElement';
        $('#selectId').append(new Option(optText, optValue));
      }
    </script>
  </body>
</html>

Try it Yourself »

The third method creates a new jQuery DOM element using the <kbd>option</kbd> tag. The value is set with the <kbd>val()</kbd> method and the text with the <kbd>text()</kbd> method. Finally, use the <kbd>append()</kbd> method to add the element to the select box.

javascript 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>

Try it Yourself »

The append() Method

The <kbd>append()</kbd> method inserts specified content at the end of the selected elements. The <kbd>append()</kbd> and <kbd>appendTo()</kbd> methods perform the same function. The difference lies in the syntax—specifically, in the placement of the content and target. Use the <kbd>prepend()</kbd> method to insert content at the beginning of the selected elements.