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   lt select id  d  name  d  gt     lt option selected disabled gt All lt  option gt     lt option value  1  gt 1 lt  option gt     lt option value  2  gt 2 lt  option gt     lt option value  3  gt 3 lt  option gt   lt  select gt

User · Answer

to remove all option value    quot  id quot   empty

User · Answer

I d try something like this     function            searchclear   click function                d   select2  val    All

User · Answer

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

User · Answer

version 4 0     d   val     trigger  change     This is the correct solution from now on according to deprecated message thrown in debug mode   quot The select2  quot val quot   method has been deprecated and will be removed in later Select2 versions  Use  element val   instead quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

According to the latest version  select2 3 4 5  documented here  it would be as simple as        my select   select2  val

User · Answer

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

User · Answer

Just to that         form-edit   trigger  reset        form-edit   find  select   each function        this  change

User · Answer

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

User · Answer

For me it works only with any of these solutions    this  select2  val   null     or     this  select2  val

User · Answer

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

User · Answer

If you have a populated select widget  for example    lt select gt       lt option value  1  gt one lt  option gt       lt option value  2  selected  selected  gt two lt  option gt       lt option value  3  gt three lt  option gt            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

User · Answer

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

User · Answer

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

[javascript] Resetting Select2 value in dropdown with reset button

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to jquery-select2