How do I reset a jquery-chosen select option with jQuery?
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/
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.
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');