How do you reset a Chosen multiple select field using jQuery?

问题

I have a form with a multiple select field, created using Formtastic and Chosen.

This form has a multiple select field, here is the rails code for it:

 = semantic_form_for 'post', :url => action_name_post_path(@post), :html => {:method => :put}, :remote => true do |f|
    = f.input :blogs, :label => _("Blog"), :as => :select, :multiple => :true, :input_html => {:class => "chzn-select"}, :collection => Blog.all

I would like to reset the input field using jQuery (the form is submitted and reset remotely), and I can't seem to figure out how to remove the selected elements//clear the input field. The issue is that chosen changes the input field so it isn't a simple text area.

Can anyone point me in the right direction?

回答1:

Try this

$('.chzn-select').val('').trigger('liszt:updated');

回答2:

Seems like combination of the two answers works for me:

$('.chosen-select option').prop('selected', false).trigger('chosen:updated');

This deselects all options and also resets the chosen drop down.

http://jsfiddle.net/donkeysauras/j9yuL/ <-- working example

回答3:

This worked for me:

$('form#form_id').find('select').each(function(i, element) {
    $(element).chosen('destroy');
    $(element).prop("selectedIndex", -1);
    $(element).chosen();
});

回答4:

from documentation

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

$("#form_field").trigger("chosen:updated");

In my case it was

jQuery("#my-select-box").trigger("chosen:updated");

my-select-box is id of selectbox.

回答5:

You can reset the multiple select using jQuery as follows

$('.chzn-select option').prop('selected', false);

Where the class name of your select is chzn-select.

An working example here.

回答6:

For whoever may have ended up on this question (there are multiple and they need to be combined), Chosen has updated their syntax--use this instead:

$('.chzn-select').val('').trigger('chosen');

where '.chzn-select' can be switched out for 'select', '#yourSelect' or whatever other method of selection you wish to use.

Check out:

How do I reset a jquery-chosen select option with jQuery?
http://harvesthq.github.io/chosen/#change-update-events

回答7:

This works fine to me

$('.reset-btn').click(function(){
    var form = $(this).closest('form').get(0);
    form.reset();
    $('.chosen-select').trigger('chosen:updated');
});

Basically i force the form reset and update chosen after reset. :D

回答8:

It all depends on your chosen settings. It worked for me:

$('.chzn-select-no-search').val('').trigger('liszt:updated');

回答9:

This solution worked for me

$('#.chosen-select').val('').prop('selected', false).trigger('chosen:updated')

回答10:

Only this could work:

$('#client_filter').html(' '); //this worked

NOT WORKING:

$('#client_filter').val('').trigger('change') ; //not working
$('#client_filter').val('').trigger('chosen:updated') ; //not working
$('#client_filter').val('').trigger('liszt:updated') ; //not working

来源：https://stackoverflow.com/questions/12543888/how-do-you-reset-a-chosen-multiple-select-field-using-jquery

标签

jquery

jquery-chosen