Add and remove multiple or single SELECT option using jQuery

The <select> element is widely used in websites to present a list of items in a Dropdown format. There are many ways you can populate data into the SELECT element from various sources. In this article, I am going to show you few tricks on how to add and remove single or multiple options in the SELECT element using jQuery.

jQuery provides some interesting methods that would help remove or add items (options) in the select element. You can either remove all the items or remove specific (single) item. Similarly, you can add multiple items to an existing list or remove all the items and add a fresh list of items.

1) Remove All Select Options

Let us assume, I have a list of books in an HTML5 <select> element and with click of a button, I wish to remove all the options from the list.

The Markup and the Script

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
    <h2>Click the “Remove All” button to remove all items in the Dropdown list!</h2>

    <select id="selBooks" name="books">
        <option value=""></option>
        <option value="Stategies Unplugged">Stategies Unplugged</option>
        <option value="jQuery Reference">jQuery Reference</option>
        <option value="HTML5 Fundamentals">HTML5 Fundamentals</option>
        <option value="Popular Science">Popular Science</option>
    </select>

    <input type="submit" id="submit" value="Remove All" />
</body>
<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            $('#selBooks')
                .find('option')
                .remove();
        });
    });
</script>
</html>

Try it

The jQuery .find() method (in the above example) will find the <option> tags in the <select> element. The <option> tag confirms that the select element has values or items in it. Therefore, first we will find the options.

The second method ".remove()" will remove all the options in the select element.

2) Remove a Specific Select Option

You can remove a specific option from the list, using jQuery ".remove()" method. However, you have to specify the name of the option. For example, I want to remove the option "HTML5 Fundamentals" from the list.

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            $('#selBooks option[value="HTML5 Fundamentals"]').remove();
        });
    });
</script>

Try it

3) Remove All Options but One

Now, this is an interesting scenario. I wish to keep one particular option or item in the list and remove the rest. Let me be more specific. From the list of books in the SELECT element, I would remove all the books, but I’ll keep the book "jQuery Reference" in the list.

To do this, I’ll use the above statement with a != (not equal to) sign.

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            $('#selBooks option[value!="jQuery Reference"]').remove();
        });
    });
</script>

Try it

4) Add a New Option or Item to the List

To add new options (or items) in the select list, I’ll use jQuery .append() method. Read more about .append() method. Using this method, you can add a new option at the end of the list.

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            $('#selBooks')
                .append('<option value="Hunger Games">Hunger Games</option>')
        });
    });
</script>

Try it

5) Add New Options after Removing Previous Options

This is another scenario where I wish to remove all the previous (default) options and add new set of options (items) in the <select> element.

<script>
    $("#submit").click(function () {
        $('#selBooks')
            .find('option')
            .remove()
            .end()
            .append('<option value="-Select-">-Select-</option>')
            .append('<option value="UX Design">Smashing UX Design</option>')
            .append('<option value="jQuery UI">jQuery UI</option>')
    });
</script>

Try it

In the above script, I am using 4 different jQuery methods. I have explained about ".find()", ".remove()" and ".append()" methods in the above examples. However, this script has the ".end()" method.

Ref: Read more about .end() method

Once it removes all the options in the list using ".remove()' method, the ".end()" would take the object back to the beginning of the script, that is, at "#selBooks" and start adding new options using .append() method.

#selBooks -> Remove Options -> Revert Back to #selBooks -> Add New Options

Without the .end() method, it would remove all the options from the select element and it would simply bail out.

Conclusion

We have learnt about how to add and remove multiple or just one specific option from a <select> element. In the process, we have learned about few important jQuery methods, such as, .find(), .remove(), .append() and .end(). You must be now eager to explore more using these simple yet useful methods in your applications. If you have found something new, do not hesitate to share it with us here.

← PreviousNext →