Resetting Select2 value in dropdown with reset button

Question

What would be the best way to reset the selected item to default? I'm using Select2 library and when using a normal button type="reset", the value in the dropdown doesn't reset.

So when I press my button I want "All" to be shown again.

jQuery

$("#d").select2();

html

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Can you should the code that you have for your button as well? — thtsigma, Mar 04 '13 at 15:59
duplicate post http://stackoverflow.com/questions/13240047/clear-dropdown-using-jquery-select2/28086410 — Jitendra Pancholi, Jan 22 '15 at 10:32

score 67 · Accepted Answer · answered Mar 05 '13 at 13:37

67

I'd try something like this:

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2('val', 'All');
    });
});

answered Mar 05 '13 at 13:37

thtsigma

4,878
2
28
29

1

You can also use something like this ---- $("#d").select2('val', ''); It will also bring the DD value to initial. – anuj arora Jul 28 '15 at 07:38

score 62 · Answer 2 · answered Mar 19 '13 at 16:49

62

You can also reset select2 value using

$(function() {
  $('#d').select2('data', null)
})

alternately you can pass 'allowClear': true when calling select2 and it will have an X button to reset its value.

answered Mar 19 '13 at 16:49

Lenart

3,101
1
26
28

3

I tried this out... and it works, except then nothing is selected. The OP wanted the first option to be selected, so something like `$('#d').select2('data', $('#d').find('option')[0])` would reset the select2 value to the first option in the original `select` element. (@Lenart, plus one for the more generic solution) – mnoble01 Sep 03 '13 at 17:53
allowClear needs placeholder. If not there will be this error TypeError: this.placeholder is undefined – vee Jun 16 '15 at 17:01

score 55 · Answer 3 · edited Jun 20 '20 at 09:12

55

version 4.0

$('#d').val('').trigger('change');

This is the correct solution from now on according to deprecated message thrown in debug mode: "The select2("val") method has been deprecated and will be removed in later Select2 versions. Use $element.val() instead"

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 08 '16 at 23:10

Ondrej Henek

854
9
12

3

You saved my day :) – selahattinunlu Oct 26 '16 at 14:11
1

This needs to be bumped way up! With V4 none of the other solutions work. – BrianLegg Jan 20 '17 at 17:58
this is the only method I have seen work, thank you. – Jeff Bluemel Mar 16 '18 at 18:39
Worked for me for version 4.0.13 – Shashank Shah Feb 16 '22 at 14:29

score 32 · Answer 4 · answered Jan 08 '14 at 01:42

32

According to the latest version (select2 3.4.5) documented here, it would be as simple as:

 $("#my_select").select2("val", "");

answered Jan 08 '14 at 01:42

Daniel Dener

699
7
6

Ultimately, this solution is the only one that worked for me. I had several select2's that I wanted to reset, and using one css selector did not work. I had to loop over them and reset them individually. – Peter P. Jan 07 '16 at 06:42

score 21 · Answer 5 · answered May 26 '15 at 07:00

21

you can used:

$("#d").val(null).trigger("change");

It's very simple and work right! If use with reset button:

$('#btnReset').click(function() {
    $("#d").val(null).trigger("change"); 
});

answered May 26 '15 at 07:00

Hoàng Vũ Tgtt

1,863
24
8

Worked for me too, didn't get any of the other solutions to work! – Ozgar Jan 12 '17 at 12:53
if you are using jquery validation with required then it will throw validation error – Soubhagya Kumar Barik Jun 11 '22 at 03:25

score 7 · Answer 6 · edited Oct 31 '13 at 22:17

7

The best way of doing it is:

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear

edited Oct 31 '13 at 22:17

Spooky

2,966
8
27
41

answered Oct 31 '13 at 21:40

anonymous anonymous

208
4
7

this works the best, none of the other solutions helped – user3036342 Mar 16 '15 at 14:46
You saved my day :) – Shoukat Mirza May 24 '18 at 10:30

score 7 · Answer 7 · answered Nov 08 '14 at 04:47

I see three issues:

The display of the Select2 control is not refreshed when its value is changed due to a form reset.
The "All" option does not have a value attribute.
The "All" option is disabled.

First, I recommend that you use the setTimeout function to ensure that code is executed after the form reset is complete.

You could execute code when the button is clicked:

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

Or when the form is reset:

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

As for what code to use:

Since the "All" option is disabled, the form reset does not make it the selected value. Therefore, you must explicitly set it to be the selected value. The way to do that is with the Select2 "val" function. And since the "All" option does not have a value attribute, its value is the same as its text, which is "All". Therefore, you should use the code given by thtsigma in the selected answer:

$("#d").select2('val', 'All');

If the attribute value="" were to be added to the "All" option, then you could use the code given by Daniel Dener:

$("#d").select2('val', '');

If the "All" option was not disabled, then you would just have to force the Select2 to refresh, in which case you could use:

$('#d').change();

Note: The following code by Lenart is a way to clear the selection, but it does not cause the "All" option to be selected:

$('#d').select2('data', null)

`$("form").on("reset",...` worked for me, in the event handler I simply called `$(".select2").trigger("change");` to refresh all of the select2 objects on the page since `reset` resets the underlying select lists properly. setTimeout() is a nice trick! — isapir, Jan 12 '16 at 20:52
Triggering `$('select').change();` on all selects, in the `setTimeout` called from the form's reset handler `$('form').on('reset', ...` resolves the problem. This should be the accepted answer. — nickl-, Aug 22 '22 at 23:51

score 5 · Answer 8 · answered Oct 22 '13 at 10:53

If you have a populated select widget, for example:

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

you will want to convince select2 to restore the originally selected value on reset, similar to how a native form works. To achieve this, first reset the native form and then update select2:

$('button[type="reset"]').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest('form').get(0).reset();
    // And then update select2 to match
    $('#d').select2('val', $('#d').find(':selected').val());
}

score 3 · Answer 9 · answered Feb 18 '20 at 23:23

3

Just to that :)

$('#form-edit').trigger("reset");
$('#form-edit').find('select').each(function(){
  $(this).change();
});

answered Feb 18 '20 at 23:23

Niko

813
8
11

score 2 · Answer 10 · answered Aug 29 '15 at 17:20

What I found works well is as follows:

if you have a placeholder option like 'All' or '-Select-' and its the first option and that's that you want to set the value to when you 'reset' you can use

$('#id').select2('val',0);

0 is essentially the option that you want to set it to on reset. If you want to set it to the last option then get the length of options and set it that length - 1. Basically use the index of whatever option you want to set the select2 value to on reset.

If you don't have a placeholder and just want no text to appear in the field use:

$('#id').select2('val','');

Ifedi Okonkwo · Answer 11 · 2014-05-04T21:12:22.497

To achieve a generic solution, why not do this:

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

This way: You'll not have to make a new logic for each select2 on your application.

And, you don't have to know the default value (which, by the way, does not have to be "" or even the first option)

Finally, setting the value to :selected would not always achieve a true reset, since the current selected might well have been set programmatically on the client, whereas the default action of the form select is to return input element values to the server-sent ones.

EDIT: Alternatively, considering the deprecated status of live, we could replace the first line with this:

$('form:has(:reset)').on('click', ':reset', function(){

or better still:

$('form:has(:reset)').on('reset', function(){

PS: I personally feel that resetting on reset, as well as triggering blur and focus events attached to the original select, are some of the most conspicuous "missing" features in select2!

score 0 · Answer 12 · answered Nov 01 '14 at 15:43

0

Select2 uses a specific CSS class, so an easy way to reset it is:

$('.select2-container').select2('val', '');

And you have the advantage of if you have multiple Select2 at the same form, all them will be reseted with this single command.

answered Nov 01 '14 at 15:43

Marcio Mazzucato

8,841
9
64
79

This one worked for me as I was trying to repopulate the values of drop down and was retaining the last selected option – Rizwan Abbas Feb 21 '16 at 11:38

score 0 · Answer 13 · answered May 24 '16 at 09:46

Sometimes I want to reset Select2 but I can't without change() method. So my solution is :

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

Using :

resetSelect2Wrapper("#mySelectId", "myValue");

score 0 · Answer 14 · answered Sep 13 '16 at 09:25

0

For me it works only with any of these solutions

$(this).select2('val', null);

or

$(this).select2('val', '');

answered Sep 13 '16 at 09:25

Mo.

26,306
36
159
225

score 0 · Answer 15 · answered Jan 06 '18 at 20:28

    // Store default values
    $('#filter_form [data-plugin="select2"]').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $('#formresetbtn').on('click', function() {
        $('#filter_form [data-plugin="select2"]').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger('change');
            });
        });

and-koghb · Answer 16 · 2021-06-30T10:37:11.450

If you want to reset forms in edit pages, you can add this button to forms

<button type="reset" class="btn btn-default" onclick="resetForm()">Reset</button>

and write your JS code like this:

function resetForm() {
    setTimeout(function() {
        $('.js-select2').each(function () {
            $(this).change();
            /* or use two lines below instead */
            // var oldVal = $(this).val();
            // $(this).select2({'val': oldVal});
        });
    }, 100);
}

score 0 · Answer 17 · answered Nov 30 '21 at 12:09

Lots of great answers, but with the newest version none worked for me. If you want a generic solution for all select2 this is working perfectly.

Version 4.0.13 tested

$(document).ready(function() {
    $('form').on('reset', function(){
        console.log('triggered reset');
        const $r = $(this);
        setTimeout(function(){
            $r.closest('form').find('.select2-hidden-accessible').trigger('change');
        }, 10);
    });
});

score 0 · Answer 18 · answered Feb 08 '23 at 13:22

0

$(function(){
    $("#btnReset").click(function(){
        $("#d").select2({
          val: "",
        });
    });
});

answered Feb 08 '23 at 13:22

Matius Rimbe

1

score -2 · Answer 19 · answered Nov 19 '20 at 13:08

-2

to remove all option value

$("#id").empty();

answered Nov 19 '20 at 13:08

Mohammad Thoriq

1

Resetting Select2 value in dropdown with reset button

19 Answers19

version 4.0

Linked