How do I reset a jquery-chosen select option with

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:

<select id="autoship_option" data-placeholder="Choose Option..." 
style="width: 175px;" class="chzn-select">
    <option value=""></option>
    <option value="active">Active Autoship</option>
</select>

Anyone familiar with Chosen and being able to clear a select box with one option? (It will have more options in the future.

Answer 1

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');

Answer 2

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]);
}

Answer 3

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

Answer 4

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.

Answer 5

Simple add trigger change like this:

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

Answer 6

If you are using chosen, a jquery plugin, then to refresh or clear the content of the dropdown use:

$('#dropdown_id').empty().append($('< option>'))

dropdown_id.chosen().trigger("chosen:updated")

chosen:updated event will re-build itself based on the updated content.