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

Question

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 1

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