Reset select2 value and show placeholder

Question

How do I set the placeholder on value reset by select2  In my example If locations or grade select boxes are clicked and my select2 has a value than the value of select2 should reset and show the default placeholder  This script is resetting the value but won t show the placeholder      locations   grade    change function            e6   select2  data          placeholder   Studiengang w  hlen        id  null       text                     e6   select2      placeholder   Studiengang w  hlen      width   resolve      id  function e         return e subject           minimumInputLength  2     ajax         url   index php option com unis amp task search locator amp tmpl component amp  lt  php echo JSession  getFormToken     gt  1        dataType   json        data  function term  page           return            q  term     search term          g      grade option selected   val             o      locations option selected   val                          results  function data  page           return            results  data                           formatResult  subjectFormatResult     formatSelection  subjectFormatSelection     dropdownCssClass   bigdrop      escapeMarkup  function m         return m

User · Answer

Use following to configure select2           selectelementid   select2           placeholder   Please select an agent           allowClear  true    This is for clear get the clear button if wanted            And to clear select input programmatically          selectelementid   val     trigger  change            selectelementid   trigger  change

User · Answer

Using select2 version 3 2 this worked for me       select2   select2  data          Didn t need to implement initSelection

User · Answer

Firstly you must define select2 like this       id   select2       placeholder   Select groups          allowClear  true      width   100         To reset select2  simply you may use the following code block       id  gt  option   removeAttr  selected        id   trigger  change

User · Answer

After trying the first 10 solutions here and failing  I found this solution to work  see  nilov commented on Apr 7     edited  comment down the page     function            fn refreshDataSelect2   function  data           this select2  data   data              Update options        var  select     this 0           var options   data map function item               return   lt option value      item id      gt     item text     lt  option gt                       select html options join      change             jQuery     The change is then made   var data      id  1  text   some value          js-some-field   refreshDataSelect2 data      The author originally showed var  select     this 1     which a commenter corrected to var  select     this 0     which I show above

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

lt label for  quot RECEIVED BY quot  class  quot control-label quot  gt  Received into store By  lt  label gt   lt label class  quot pull-right quot  gt     lt button     type  quot button quot      title  quot Clear Received into store By quot      class  quot receive clear clear-button quot      aria-label  quot Select2 options quot     gt      x    lt  button gt  lt  label  gt   lt select type  quot text quot  class  quot clear receive info by quot  gt     lt option value  quot  quot  gt --Select-- lt  option gt     lt option value  quot value1 quot  gt value1 lt  option gt     lt option value  quot value2 quot  gt value2 lt  option gt     lt option value  quot value3 quot  gt value3 lt  option gt   lt  select gt   jQuery  var  clear receive info by      quot  clear receive info by quot   select2       quot  receive clear quot   on  quot click quot   function           clear receive info by val null  trigger  quot change quot

User · Answer

My solution is    el off  select2 unselect    el on  select2 unselect   function  event        var  option       lt option value    selected gt  lt  option gt         var  selected     event target         selected find  option selected                 remove                 end                 append  option                trigger  change

User · Answer

I have tried above solutions but none worked with version 4x   What i want to achieve is  clear all options but don t touch the placeholder  This code works for me   selector find  option not  first    remove   trigger  change

User · Answer

This is the correct way        customers select   val     trigger  change      I am using the latest release of Select2

User · Answer

With Select2 version 4 0 9 this works for me      quot  myselect2 quot    val     trigger  change

User · Answer

So  to reset the form some of you will have a reset button  Add the following code inside the script tag      your btn class   click function            select field id   val              select field id   select2       placeholder   this is a placeholder                 Or just to empty select field without keeping a placeholder       your btn class   click function            select field id   val

User · Answer

I dont know if anyone else experienced this  but once the code hit the trigger  change   my javascript just stopped  never returned form the trigger  and the rest of the function was never executed     I am not familiar enough with jquerys trigger to say that this is expected on not  I got around it by wrapping it in a setTimeout  ugly but effective

User · Answer

Before you clear the value using this     customers select   select2  val        Try setting focus to any other control on reset click   This will show the placeholder again

User · Answer

You must define the select2 as      customers select   select2       placeholder   Select a customer       initSelection  function element  callback                                   To reset the select2      customers select   select2  val

User · Answer

The accepted answer does not work in my case  I m trying this  and it s working   Define select2       customers select   select2       placeholder   Select a State       allowClear  true       or      customers select   select2       placeholder   Select a State        To reset       customers select   val     trigger  change     or      customers select   empty   trigger  change

User · Answer

From select2 website        mySelect2ControlId   val null  trigger  change

User · Answer

For users loading remote data  this will reset the select2 to the placeholder without firing off ajax   Works with v4 0 3       lstProducts   val     trigger  change select2

User · Answer

Use this        select   val     trigger  change

User · Answer

Select2 has changed their API      Select2  The select2  val   method has been deprecated   and will be removed in later Select2 versions  Use  element val   instead    The best way to do this now is       your select input   val        Edit  December 2016 Comments suggest that the below is the updated way to do this       your select input   val

User · Answer

If you want to clear all select2 inputs when closing a modal for instance then you can add a class  select2  and set them all back to their place holders like so       myModal   on  hidden bs modal   function  e          this           find   select2   select2  placeholder   Choose an option             val     trigger  change select2          This approach of resetting all at once can be used for forms either   The version is which this is working for me is 4 0 10

User · Answer

I was also having this problem and it stems from val null  trigger  change    throwing a No select2 compat inputData error before the placeholder gets reset  I solved it by catching the error and setting the placeholder directly  along with a width    Note  If you have more than one you will need to catch each one   try          sel item ID   select2   val null  trigger  change     catch err       console debug err    try          sel location ID   select2   val null  trigger  change     catch err       console debug err        select2-search  field   0  placeholder  All Items       select2-search  field   1  placeholder  All Locations       select2-search  field   width 173     I m running Select2 4 0 3

User · Answer

This solution work for me  Select2 4 0 13      select   on  quot select2 unselecting quot   function  e         this  val     trigger  change       e preventDefault

User · Answer

The DOM interface  already keeps track of the initial state      So doing the following is enough        reset   on  click   function              my select option   prop  selected   function             return this defaultSelected

User · Answer

The only thing can work for me is      select2element   val null  trigger  change     I m using version 4 0 3  Reference  According to Select2 Documentation

User · Answer

One  very  hacky way to do it  I saw it work for version 4 0 3    var selection       DelegateId   data  select2   selection  var evt   document createEvent  UIEvents    selection  handleClear evt   selection trigger  toggle           allowClear must be set to true an empty option must exist in the select element

User · Answer

customers select   val     trigger  change        this will remove values AND most important for me - it also remove an   empty x button

User · Answer

myselectdropdown   select2  val    0     where 0 is your first value of the dropdown

User · Answer

as of v 4 0 x     to clear the values  but also restore the placeholder use      html   lt option gt  lt  option gt         defaults to placeholder   if it s empty  it will select the first option item instead which may not be what you want   html         defaults to whatever item is first   frankly   Select2 is such a pain in the butt  it amazes me it hasn t been replaced

User · Answer

For the place holder      stateID   select2       placeholder   Select a State        To reset a select 2      stateID   val          stateID   trigger  change      Hope this helps

User · Answer

Well whenever I did      myselectdropdown   select2  val       trigger  change      I started getting some kind of lag after some three to four triggers  I suppose there s a memory leak  Its not within my code because if I do remove the this line  my app is lag free   Since I have allowClear options set to true  I went with      select2-selection  clear   trigger  mousedown      This can be followed by a    myselectdropdown   select2  close    event trigger on the select2 dom element in case you wanna close the open suggestion drop down

User · Answer

Following the recommended way of doing it  Found in the documentation https   select2 github io options html my-first-option-is-being-displayed-instead-of-my-placeholder  this seems to be a fairly common issue    When this happens it usually means that you do not have a blank  lt option gt  lt  option gt  as the first option in your  lt select gt    as in    lt select gt      lt option gt  lt  option gt      lt option value  foo  gt your option 1 lt  option gt      lt option value  bar  gt your option 2 lt  option gt      lt option value  etc  gt     lt  option gt   lt  select gt

User · Answer

I ve read all the answers and many have been deprecated  This is how currently you can clear and set the place holder value     Clear and put a blank select placeholder    quot  MySelect quot   prop  disabled   false  find  quot option gt 0  quot   remove

User · Answer

Use this code into your js file      id   val  1        id   trigger  change

User · Answer

You can clear te selection by      object   empty      But it wont turn you back to your placeholder   So its a half solution

User · Answer

TO REMOVE SELECTED VALUE      employee id   select2  val           TO CLEAR OPTION VALUES      employee id   html

User · Answer

In order to reset the values and the placeholder I just reinitiate the select2 element        select2element    select2       placeholder   ---placeholder---       allowClear  true      minimumResultsForSearch  5      width  100

User · Answer

I do this for this case         select   val            select2 select2-container   remove          select2   select2       I change the select value into empty I remove container for select2 Re-call select2

User · Answer

I know this is kind of an old question  but this works for the select2 version 4 0       select2-element   val     trigger  change      or      select2-element   val     trigger  change select2       if you have change events bound to it

User · Answer

I tried the above solutions but it didn t work for me   This is kind of hack  where you do not have to trigger change      select   select2  destroy   val     select2      or     select   each function        added a each loop here           this  select2  destroy   val     select2

[jquery] Reset select2 value and show placeholder

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to jquery-select2