Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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: In this example, we are using the above-explained approach.

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:



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