How do I reset a jquery-chosen select option with jQuery

Question

I have tried numerous things and nothing seems to be working   I am using jQuery and Chosen plugin   Methods I have tried   var select   jQuery   autoship option     select val jQuery  options first   select  val      jQuery   autoship option   val       jQuery   autoship option   text       jQuery   autoship option   empty       jQuery   autoship option option value       attr  selected   true     It always shows the Active Autoship option once it has been selected   I can t seem to get it to clear the selection   Here is the select box    lt select id  autoship option  data-placeholder  Choose Option      style  width  175px   class  chzn-select  gt       lt option value    gt  lt  option gt       lt option value  active  gt Active Autoship lt  option gt   lt  select gt    Anyone familiar with Chosen and being able to clear a select box with one option   It will have more options in the future

User · Answer

var config             chosen-select                          chosen-select-deselect      allow single deselect true           chosen-select-no-single     disable search threshold 10           chosen-select-no-results    no results text  Oops  nothing found             chosen-select-width         width  95              for  var selector in config            selector  chosen config selector            Use above config and apply class  chosen-select-deselect  for manually deselect and set the value empty  or if you want deselect option in all combo then apply config like below   var config         chosen-select               allow single deselect true    Remove if you do not need X button in combo     chosen-select-deselect      allow single deselect true       chosen-select-no-single     disable search threshold 10       chosen-select-no-results    no results text  Oops  nothing found         chosen-select-width         width  95      for  var selector in config        selector  chosen config selector

User · Answer

HTML    lt select id  autoship option  data-placeholder  Choose Option              style  width  175px   class  chzn-select  gt       lt option value    gt  lt  option gt       lt option value  active  gt Active Autoship lt  option gt   lt  select gt   lt button id  rs  gt Click to reset lt  button gt    JS       rs   on  click   function           autoship option   find  option selected   removeAttr  selected          Fiddle  http   jsfiddle net Z8nE8

User · Answer

Try this to reload updated Select box with Latest Chosen JS       form field   trigger  chosen updated      http   harvesthq github io chosen   It will Updated chosen drop-down with new loaded select box with Ajax

User · Answer

Try this       autoship option option selected    removeAttr  selected

User · Answer

This is more effective than find      select   children  option   first   prop  selected   true     select   trigger  chosen updated

User · Answer

I am not sure if this applies to the older version of chosen but now in the current version v1 4 1  they have a option     autoship option   chosen   allow single deselect true     This will add a  x  icon next to the name selected Use the  x  to clear the  select  feild   PS make sure you have  chosen-sprite png  in the right place as per the chosen css so that the icons are visible

User · Answer

If you are using chosen  a jquery plugin  then to refresh or clear the content of the dropdown use       dropdown id   empty   append     lt  option gt      dropdown id chosen   trigger  chosen updated     chosen updated event will re-build itself based on the updated content

User · Answer

Setting the select element s value to an empty string is the correct way to do it  However  that only updates the root select element  The custom chosen element has no idea that the root select has been updated   In order to notify chosen that the select has been modified  you have to trigger chosen updated       autoship option   val     trigger  chosen updated      or  if you re not sure that the first option is an empty string  use this       autoship option        find  option first-child   prop  selected   true       end   trigger  chosen updated      Read the documentation here  find the section titled Updating Chosen Dynamically      P S  Older versions of Chosen use a slightly different event       autoship option   val     trigger  liszt updated

User · Answer

autoship option   val     trigger  liszt updated      and set the default option value to      It has to be used with chosen updated jQuery available at this link  https   raw github com harvesthq chosen master chosen chosen jquery min js   I spent one full day to find out at the end that jquery min is different from chosen jquery min

User · Answer

The first option should sufice  http   jsfiddle net sFCg3   jQuery   autoship option   val        But you have to make sure you are runing this on an event like click of a button or ready or document  like on the jsfiddle   Also make sure that theres always a value attribute on the option tags  If not  some browsers always return empty on val     Edit  Now that you have clarifyed the use of the Chosen plugin  you have to call      autoship option   trigger  liszt updated      after changing the value for it to update the intereface   http   harvesthq github com chosen

User · Answer

You can try this to reset  empty  drop down        autoship option   click function                    autoship option   empty      remove all child nodes             var newOption       lt option value    gt  lt  option gt                     autoship option   append newOption                   autoship option   trigger  chosen updated

User · Answer

If you need to have first option selected by no matter of its value  sometimes first option value is not empty  use this       autoship option   val     autoship option option first-child   val    trigger  liszt updated      It will get value of first option and set it as selected then trigger update on Chosen  So it work like reset to first option on list

User · Answer

I use this      idSelect   val       tested on IE  Safari  amp  Firefox

User · Answer

i think you have to assign a new value to the select  so if you want to clear your selection you probably want to assign it to the one that has value       I think that you will be able to get it by assigning the value to empty string so  val

User · Answer

from above solutions  Nothing worked for me  This worked        client filter   html         this worked  Why is that        ajax            type   POST            url  xyz ajax          dataType   json           data     csrfmiddlewaretoken  csrftoken                  instancess   selected instances             success  function response                   clear the client DD                        client filter   val     trigger  change       not working                 client filter   val     trigger  chosen updated       not working                 client filter   val     trigger  liszt updated       not working                  client filter   html         this worked              jQuery each response  function index  item                          client filter   append   lt option value    item id    gt     item text     lt  option gt                                                         client filter   trigger  chosen updated

User · Answer

The new Chosen libraries don t use the liszt  I used the following   document getElementById  autoship option   selectedIndex   0      autoship option   trigger  chosen updated

User · Answer

Simple add trigger change like this         selectId   val     trigger  change

User · Answer

jQuery   autoship option option first   attr  selected   true

User · Answer

Exactly i had the same requirement  But resetting the drop down list by setting simply empty string with jquery won t work  You should also trigger update    Html   lt select class  chosen-control  gt   lt option gt 1 lt option gt   lt option gt 2 lt option gt   lt option gt 3 lt option gt   lt  select gt   Jquery      chosen-control   val     trigger  liszt updated      sometimes based on the version of chosen control you are using  you may need to use below syntax       chosen-control   val     trigger  chosen updated      Reference  How to reset Jquery chosen select option

User · Answer

jQuery   chosen-processed   find   search-choice-close   click

User · Answer

In Chrome version 49  you need always this code     select option first   prop  selected   true

[jquery] How do I reset a jquery-chosen select option with jQuery?

Examples related to jquery

Examples related to jquery-chosen