Clear dropdown using jQuery Select2

Question

I m trying to programmatically clear a drop down using the fantastic Select2 library  The drop down is dynamically filled with a remote ajax call using the Select2 query option   HTML    lt input id  remote  type  hidden  data-placeholder  Choose Something    gt    Javascript           var  remote       remote              remote select2               allowClear  true              minimumInputLength  2              query  function options                     ajax                       dataType   json                       url  myURL   options term                      error  function jqXHR  textStatus  errorThrown                           smoke alert textStatus      server returned error on parsing arguments starting with     options term                                              success  function data  textStatus  jqXHR                           var results                               for var i   0  i  lt  data length    i                               results push  id  data i  id  text  data i  name                                                       options callback  results  results  more  false                                                                          Unfortunately  the call to  remove select2  val       throws the following exception    Uncaught Error  cannot call val   if initSelection   is not defined   I ve tried setting the attr  setting the val  text and the Select2 specific data function  Can t seem to make the guy clear and work in a radio button like manner  Anyone got suggestions

User · Answer

From  4 0 in order to really clean the select2 you need to do the following    remote select2 val       remote select2 html      selectedValues          if you have some variable where you store the values  remote select2 trigger  change      Please note that we select the select2 based on the initial question  In your case most probably you will select the select2 in a different way   Hope it helps

User · Answer

Method proposed  Lelio Faieta is working for me  but because i use bootstrap theme  it remove all bootstrap settings for select2  So I used following code       remote option   remove

User · Answer

These both work for me to clear the dropdown    select2  data   null   select2  val   null    But important note  value doesn t get reset   val   will return the first option even if it s not selected  I m using Select2 3 5 3

User · Answer

Using select2 version 4 you can use this short notation       remote   html     select2  data   id null  text  null       This passes a json array with null id and text to the select2 on creation but first  with  html     empties the previously stored results

User · Answer

You can use this or refer further this https   select2 org programmatic-control add-select-clear-items      mySelect2   val null  trigger  change

User · Answer

This works for me      remote select2  data    id  null  text  null     It also works with jQuery validate when you clear it that way    -- edit 2013-04-09  At the time of writing this response  it was the only way  With recent patches  a proper and better way is now available     remote select2  data   null

User · Answer

Since none of them all worked for me  select2 4 0 3  is went the std select way   for var i   selectbox options length - 1   i  gt   0   i--      selectbox remove i

User · Answer

This is how I do       my input   select2  destroy   val     select2

User · Answer

I m a little late  but this is what s working in the last version  4 0 3        select id   val     trigger  change

User · Answer

For select2 version 4 easily use this       remote   empty      After populating select element with ajax call  you may need this line of code in  the success section to update the content     success  function data  textStatus  jqXHR         remote   change

User · Answer

This is the proper one  select2 will clear the selected value and show the placeholder back      remote select2  data   null

User · Answer

You should use this one           remote   val null  trigger  change

User · Answer

I found the answer  compliments to user780178  I was looking for in this other question   Reset select2 value and show placeholdler      customers select   select2  val

User · Answer

In case of Select2 Version 4   it has changed syntax and you need to write like this      clear all option     select with blank data   html     select2  data    id      text              clear and add new option     select with data   html     select2  data      id      text         id   1   text   Facebook      id   2   text   Youtube      id   3   text   Instagram      id   4   text   Pinterest

User · Answer

For Ajax  use    quot  select2 quot   val  quot  quot   trigger  quot change quot    That should solve the issue

User · Answer

This solved my problem in version 3 5 2    remote empty   append new Option    trigger  change      According to this issue you need an empty option inside select tag for the placeholder to show up

[javascript] Clear dropdown using jQuery Select2

Examples related to javascript

Examples related to jquery

Examples related to jquery-select2