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.
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/
Most helpful comment
Multi-selects expect an array as value, so to reset it using jQuery you can use the following:
See here for a live example: https://jsfiddle.net/koenpunt/L1sd259w/