Reset Select2 in the drop-down menu using the reset button

Question

What would be the best way to reset the selected item to default? I use the Select2 library, and when using the usual type="reset" value in the drop-down list is not reset.

So when I press my button, I want to display "Everything" 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> 

Answer 1

I would try something like this:

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

Answer 2

You can also select reset select2 with

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

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

Answer 3

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

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

Answer 4

version 4.0

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

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

Answer 5

you can use:

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

It is very simple and works correctly! If the reset button is used:

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

Answer 6

The best way to do this is:

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

Answer 7

I see three problems:

• The display of the Select2 control does not refresh when its value changes due to the reset form.
• The All option does not have a value attribute.
• The All option is disabled.

First, I recommend using the setTimeout function to ensure that the code runs after the reset form completes.

You can execute the code at the click of a button:

 $('#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); }); 

How to use the code:

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

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

If the value="" attribute needs to be added to the "All" option, you can use the Daniel Dener code:

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

If the "All" option has not been disabled, you just need to force Select2 to be updated, in which case you could use:

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

Note. The following Lenart code is a way to clear the selection, but it does not invoke the All selection:

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

Answer 8

If you have a populated selection widget, for example:

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

you need to convince select2 to restore the originally selected value to reset, similar to how the native form works. To do this, first create a reset of your own 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()); } 

Answer 9

What I found works well:

if you have a placeholder option, such as "All" or "-Select-", and its first option and that you want to set the value when you are "reset", you can use

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

0 is essentially the option you want to set to reset. If you want to set it to the last option, then get the length of the options and set its length to 1. Basically use the index of any option that you want to set select2 to reset.

If you don’t have a placeholder and you just want the text not to appear in the field:

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

Answer 10

To achieve a common solution, why not do it:

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

Thus: You do not need to create new logic for each select2 in your application.

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

Finally, setting :selected does not always result in a true reset, since the currently selected one might have been installed programmatically on the client, while the default action of form select should return a value input element for those sent by the server.

EDIT: Alternatively, given the outdated status of live , we could replace the first line with the following:

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

or better yet:

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

PS: I personally think that resetting to reset, as well as triggering blur and focus events related to the original selection, are some of the most noticeable "missing" functions in select2!

Answer 11

Select2 uses a specific CSS class, so a simple way to reset:

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

And you have the advantage, if you have multiple Select2 in the same form, they will all be reset with this single command.

Answer 12

Sometimes I want to reset Select2, but I cannot without change (). So my solution is:

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

Using:

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

Answer 13

For me, this only works with any of these solutions.

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

or

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