Chosen: Chosen Multiple reset doesn't work

Created on 4 Dec 2013  ·  5Comments  ·  Source: harvesthq/chosen

Using the line $(".chosen-select").val('').trigger("chosen:updated"); in a jquery script does not reset the chosen form field. It works ok for the single dropdown though.

Most helpful comment

Multi-selects expect an array as value, so to reset it using jQuery you can use the following:

$('.chosen-select').val([]).trigger('chosen:updated')

See here for a live example: https://jsfiddle.net/koenpunt/L1sd259w/

All 5 comments

Try the following:

$('.chosen-select option:selected').removeAttr('selected');
$('.chosen-select').trigger('chosen:updated');

Tried that but the html that gets generated for the multiple is different from the single select.
This is it here.

<div class="chosen-container chosen-container-multi" style="width: 100%;" title="" id="users_chosen">
  <ul class="chosen-choices">
    <li class="search-choice">
      <span>Manus </span>
      <a class="search-choice-close" data-option-array-index="1"></a>
    </li>
    <li class="search-field">
      <input type="text" style="width: 25px;" autocomplete="off" class="" value="Choose users...">
    </li>
  </ul>
  <div class="chosen-drop">
    <ul class="chosen-results">
      <li data-option-array-index="1" style="" class="result-selected">Manus </li>
      <li data-option-array-index="2" style="" class="active-result">Owen </li>
      <li data-option-array-index="3" style="" class="active-result">Sean </li>
      <li data-option-array-index="4" style="" class="active-result">Sinead </li>
    </ul>
  </div>
</div>

Thanks a lot for this, I was looking out for this option and had posted on the StackOverflow site, but didin't get any reponse. Looks like this forum is more active :+1:

I tried to reset the whole form with something like that:

        var form = $('form');
    form.get(0).reset();
    form.find('.filterSelect').trigger('chosen:updated');

But i have the similar problem ... for the single drop downs everythings works fine. But the multiple selects don`t have a placeholder anymore.

Multi-selects expect an array as value, so to reset it using jQuery you can use the following:

$('.chosen-select').val([]).trigger('chosen:updated')

See here for a live example: https://jsfiddle.net/koenpunt/L1sd259w/

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kafoso picture kafoso  ·  5Comments

jbrooksuk picture jbrooksuk  ·  6Comments

engintekin picture engintekin  ·  8Comments

asvetlenko picture asvetlenko  ·  3Comments

mcclurem picture mcclurem  ·  4Comments