How to Dynamically Unselect or Clear all Selected Values in an Input Box using jQuery Select2

If you are using jQuery Select2 plug-in in your web page to select multiple options from a list of dropdowns using Input box, then you should also know how to dynamically unselect the all the values instantly. Here, in this article I’ll show you an example on how to unselect all the values of Select2 with the click of a single button, using jQuery.

It is not wise to force your users to unselect multiple values one by one. It takes time. I have previously shared an article on jQuery Select2 multiple selection plug-in using JSON array data with an Input box. I am sure you might have read the article and its example. Now, lets see how we can unselect multiple values in the input box.

The Markup with the Script

In the markup section, I have an <input> box of type text. The box will serve as a dropdown list that will allow you to choose multiple items from the list. Now we need to bind the <input> box with some JSON data using jQuery Select2.

Next, I have <button> control. The click event will clear or unselect the multiple values in input box.

I have also included the CDN for jQuery with Select2.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Select2 Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/select2/3.4.5/select2.min.js"></script>
    <link href="https://cdn.bootcss.com/select2/3.4.5/select2.min.css" rel="stylesheet">
</head>
<body>
    <p>Set focus on the textbox and select multiple values. Click the button to unselect all values.</p>

    <input type="text" id="accessories" value="" />
    <button id="bt">Unselect</button>
</body>

<script>
    $(document).ready(function () {
        // THE JSON ARRAY.
        var acceArray =
            [{ id: '1', text: 'Laptop' },
                { id: '2', text: 'Mise' },
                { id: '3', text: 'Keyboards' },
                { id: '4', text: 'Routers' },
                { id: '5', text: 'Modems' },
                { id: '6', text: 'Speakers' },
                { id: '7', text: 'UPS'}];

        // BIND DATA TO THE INPUT BOX USING "Select2".
        $('#accessories').select2({
            data: acceArray,
            multiple: true,
            placeholder: "Select items from List",
            width: 200
        });

        // UNSELECT ALL VALUES WITH THE CLICK OF BUTTON.
        $('#bt').click(function () {
            $('#accessories').val('').trigger("change");
        });
    });
</script>
</html>

Try it

The click event of the button has the code to unselect or clear the input box with multiple values. Since I have only one textbox (input box) in my web page, I have used the id as a Selector to clear the values.

I am also using the Select2 trigger() method with val() method, which will trigger the change event. This allows Select2 to listen to the change event.

You can read more about What events does Select2 listen

Unselect all Values using “element” as a Selector

In the above example, I had only one input box (type text) in my page and I have used its id as Selector to clear the input box. The id will have prefix # (Hash).

$('#accessories').val('').trigger("change");

However, if you have more than one textbox in your web page, you can use the element as a Selector to clear or unselect multiple values in all the boxes with a single button click. There will be a slight change in the script.

The Markup

I now have two <input> boxes with type text, with a <button> control.

<body>
    <input type="text" id="Text1" value="" />
    <input type="text" id="Text2" value="" />
    <button id="Button1">Unselect</button>
</body>

The Script

The JSON array remains the same. (See above <script>). Since, I have two <input> boxes in my web page, I am using input as a Selector.

$('input').select2({
    data: acceArray,
    multiple: true,
    placeholder: "Select items from List",
    width: 200
});

$('#bt').click(function () {
    $('input').val('').trigger("change");
});

← PreviousNext →