How can I reset a form with jQuery chosen plugin?

Question

I have a bunch of select elements in a form with which I am using the Jquery Chosen plugin. How can I reset the form? The following does not work:

Answer 1

Sometimes you have to reset the select that chosen is called on.

I do this

jQuery.fn.chosen_reset = function(n){
  $(this).chosen('destroy');
  $(this).prop('selectedIndex', 0);
  $(this).chosen(n)
}

And call this function like this, with the options as an argument

$('select').chosen_reset({width:'369px'});

Answer 2

in order to have reset working naturally use this:

$("input[type='reset'], button[type='reset']").click(function(e){
    e.preventDefault();

    var form = $(this).closest('form').get(0);
    form.reset();

    $(form).find('select').each(function(i, v) {
        $(v).trigger('chosen:updated');
    });
}

Answer 3

For a more hassle free approach...assuming your inputs are inside <form> tags:

<form>
    <!-- your selects go here and any other input fields -->
    <input type="reset" value="Reset"> 
</form>

This is what I would do:

$("input[type='reset'], button[type='reset']").click(function(e){
      setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);
});

See fiddle here.

Answer 4

Since the release of chosen v1.0 the trigger is now called 'chosen:updated'. Anyone using this new version needs to trigger the update using

$(".chosen-select").val('').trigger("chosen:updated");