Terry Terry - 5 months ago 48
jQuery Question

How to reset one Bootstrap Multiselect when another Bootstrap Multiselect is used via jQuery

I am using the Bootstrap-Multiselect (http://davidstutz.github.io/bootstrap-multiselect/)

I have two dropdowns, when an item is selected in one dropdown I need to reset the other dropdown. I have been attempting to do this using the onchange jQuery but without success.

If an option is selected from dropdown1, then deselect/reset everything in dropdown2.

<form>
<select id="dropdown1" name="dropdown1" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>


If an option is selected from dropdown2, then deselect/reset everything in dropdown1.

<select id="dropdown2" name="dropdown2" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>


My failed jQuery

$("#dropdown1").change(function () {
$('#dropdown2').multiselect('refresh');
});

$("#dropdown2").change(function () {
$('#dropdown1').multiselect('refresh');
});


How should this be accomplished?

Answer

I suspect you need to reset the select element and then do the refresh, like so:

$("#dropdown1").change(function () {
    $('#dropdown2 option:selected').each(function() {
        $(this).prop('selected', false);
    })
    $('#dropdown2').multiselect('refresh');
});

$("#dropdown2").change(function () {
    $('#dropdown1 option:selected').each(function() {
        $(this).prop('selected', false);
    })
    $('#dropdown1').multiselect('refresh');
});

That code is borrowed from the reset button code on the Bootstrap Multiselect site. See the further examples