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

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.

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

Solution 2:

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/

Solution 3:

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.

Solution 4:

Try this:

$("#autoship_option option[selected]").removeAttr("selected");