Skip to content
Related Articles

Related Articles

How to remove all the options of a select box and then add one option and select it using JQuery ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 02 Mar, 2022

Given a select box with a fixed number of options, the task is to remove all the options and then add one option and immediately select that particular option using jQuery. There are two approaches that can be taken to achieve this:

Approach 1: Using find(), remove(), end() and append() Methods

In the following example, a select box with some options and a button element is created. The button also has an onclick attribute which means that on the button click, the script or the function specified within the attribute is executed.

We select all the options in the select box using the find() method with a parameter of “option“. Then, we remove all the selected options using the remove() method. We use the end() method to revert the selection back to the select box. To add one option, the append() method can be used. The parameter inside the append() method is a string containing HTML markup for the option to add to the select box.

Example: In the following example, a select box with 4 options is created. On button click, all the options are removed and one new option is added.

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
   </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: green;
        font-size: 40px;
      }
      p {
        font-size: 25px;
        font-weight: bold;
      }
      button {
        display: block;
        cursor: pointer;
        margin: 5rem auto 0 auto;
      }
      select {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>GeeksforGeeks</h1>
    <p>
       jQuery - Remove all options of select box 
       then add one option and select it
    </p>
  
    <select id="geek-select">
      <option value="geek1">GEEK 1</option>
      <option value="geek2">GEEK 2</option>
      <option value="geek3">GEEK 3</option>
      <option value="geek4">GEEK 4</option>
    </select>
    <button onclick="removeThenAdd()">
      Click me to remove all options and then add one option
    </button>
    <script type="text/javascript">
      function removeThenAdd() {      
        $("#geek-select").find("option").remove().end().append(
        '<option value = "gfg">GeeksForGeeks</option>');
      }
    </script>
  </body>
</html>

Output:

Approach 2: Using empty() and append() Methods

Instead of selecting all options, removing them, and then adding one option, we directly empty or remove all the children nodes of the select box. The children nodes are removed using the empty() method and then add a new option using the append() method. The parameter inside the append() method is a string containing HTML markup for the option to be added to the select box.

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
   </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 40px;
      }
  
      p {
        font-size: 25px;
        font-weight: bold;
      }
  
      button {
        display: block;
        cursor: pointer;
        margin: 5rem auto 0 auto;
      }
  
      select {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>GeeksforGeeks</h1>
    <p>
      jQuery - Remove all options of select box 
      then add one option and select it
    </p>
  
    <select id="geek-select">
      <option value="geek1">GEEK 1</option>
      <option value="geek2">GEEK 2</option>
      <option value="geek3">GEEK 3</option>
      <option value="geek4">GEEK 4</option>
    </select>
    <button onclick="removeThenAdd()">
      Click me to remove all options and then add one option
    </button>
    <script type="text/javascript">
      function removeThenAdd() {
        
        $("#geek-select").empty().append(
        '<option value = "gfg">GeeksForGeeks</option>');
      }
    </script>
  </body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!