Refresh Jquery multi chosen select

Question

How to remove selected items from jquery multi chosen select after click on reset button?

<select data-placeholder="Select" id="options" class="chosen-select" maxwidth="50px" multiple tabindex="15" ></select>

I have tried several ways with no luck. This is my code:

    $("#options").multiselect('refresh');
    $("#options").multiselect('clearSelection');
    $('#options').multiSelect('deselect_all');
    $("#options").find('option:selected').removeAttr("selected");

After above still display selected items as in the image,

Any help would be appreciated.

That screenshot doesn't look like a multiselect - it looks like Chosen (https://harvesthq.github.io/chosen/) or tagit (http://aehlke.github.io/tag-it/)... Are you 100% certain about which library is in use? EDIT: Actually based on the class, it IS a chosen field... use `.chosen()` methods, or set the property to false (ie `$("#options").find('option:selected').prop('selected',false)`), rather than just removing the attribute; then trigger an update: `$("#options").trigger('chosen:updated');` — Chris O'Kelly, Sep 27 '16 at 03:04

score 1 · Answer 1 · edited May 23 '17 at 10:34

1

That's not a multiselect, it's a jQuery chosen field, it looks like. the answer here covers you: 'select all' and 'remove all' with chosen.js - just remove the selected property from options then update the chosen element

$("#options").find('option:selected').prop('selected',false);
$("#options").trigger('chosen:updated');

If you are using an older version of chosen, then the correct trigger for you might be: liszt:updated, eg.

$("#options").trigger('liszt:updated');

But you'd need to add that detail to the question for me to say for sure.

As an aside, if you have ALSO initialized this as a multiSelect, I predict problems in your future. I would ascertain for certain which widget you WANT to use, and make sure you only initialize it/call methods on it as that widget, and that widget only

edited May 23 '17 at 10:34

Community

1
1

answered Sep 27 '16 at 03:09

Chris O'Kelly

1,863
2
18
35

YES it is Jquery chosen multiple but this answer not works for me. Selected items still there. – Zusee Weekin Sep 27 '16 at 04:16
Then I would suggest you may have problems related to having initalized it as two different types of widgets. The first line is the accepted way of deselecting all options in a select list (http://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery) the second line is the accepted way of updated a chosen widget whose options have been updated (https://harvesthq.github.io/chosen/options.html#triggerable-events). you may also be using an out of date version of chosen, which had different triggers if I remember correct. You'l need to add more info to the question for help. – Chris O'Kelly Sep 27 '16 at 05:02
but to be clear, if you are calling anything starting with `$('#options').multiSelect(...` , then I would expect nothing will work for you - multiSelect methods will not work on chosen fields, and will likely cause issues for the field. – Chris O'Kelly Sep 27 '16 at 05:07

score 0 · Answer 2 · answered Sep 27 '16 at 02:30

0

I'm not too familiar with multiselect, but according to the docs it looks like you can deselect all by using:

$('#your-select').multiSelect('deselect_all');

answered Sep 27 '16 at 02:30

Logan McCaul

36
2

score 0 · Answer 3 · answered Sep 27 '16 at 02:34

0

You can use:

$("#options").find('option:selected').removeAttr("selected");

Example: https://jsfiddle.net/hs9yft2n/1/

answered Sep 27 '16 at 02:34

Văn Tuấn Phạm

657
4
10

Refresh Jquery multi chosen select

3 Answers3