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

Question

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?

can you post the link to your page? that might give us (SO) a clue as to how you can reset it with JS. — techfoobar, Sep 22 '12 at 12:53

score 14 · Answer 1 · answered Nov 20 '13 at 00:58

14

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

answered Nov 20 '13 at 00:58

DONKEYSAURUS

141
1
3

The answer by suke is a better option; this method will be very slow if you have many options in your select menus – Erik Apr 02 '14 at 17:00
1

yeah.. it is slow, you don't need to call the trigger for each option element. You have to trigger only for the select element, then it is blazing fast. Here is my edit: http://jsfiddle.net/j9yuL/126/ – MilMike Aug 05 '16 at 08:06

Mr. 14 · Accepted Answer · 2012-09-23T00:33:58.100

13

Try this

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

edited Sep 23 '12 at 00:33

answered Sep 22 '12 at 13:02

Mr. 14

9,228
6
37
54

score 3 · Answer 3 · answered Jan 29 '16 at 15:17

3

This worked for me:

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

answered Jan 29 '16 at 15:17

Hassan Akram

641
6
19

score 1 · Answer 4 · answered Sep 22 '12 at 13:02

1

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.

answered Sep 22 '12 at 13:02

The Alpha

143,660
29
287
307

score 1 · Answer 5 · edited Nov 14 '21 at 06:49

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.

score 1 · Answer 6 · answered Feb 11 '20 at 20:22

1

This is the only thing that worked for me. multiselect values are an array so you should do it this way:

$('#elementID').val([]).trigger('chosen:updated');

answered Feb 11 '20 at 20:22

Amir Tofighi

287
2
4

score 0 · Answer 7 · edited May 23 '17 at 11:46

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:

score 0 · Answer 8 · answered Sep 15 '14 at 17:55

0

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

answered Sep 15 '14 at 17:55

Waldemar Neto

826
6
17

score 0 · Answer 9 · answered Mar 08 '18 at 08:52

0

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

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

answered Mar 08 '18 at 08:52

JarekMaxiM

36
2

score 0 · Answer 10 · answered Mar 20 '19 at 12:44

0

This solution worked for me

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

answered Mar 20 '19 at 12:44

Azam Alvi

6,918
8
62
89

score 0 · Answer 11 · answered Jul 03 '19 at 12:06

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

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

11 Answers11

Linked