当通过jQuery使用另一个Bootstrap Multiselect时,如何重置一个Bootstrap Multiselect

Question

我正在使用Bootstrap-Multiselect(http://davidstutz.github.io/bootstrap-multiselect/)

我有两个下拉列表,当在一个下拉列表中选择一个项目时,我需要重置另一个下拉列表.我一直试图使用onchange jQuery做到这一点,但没有成功.

如果从dropdown1中选择了一个选项,则取消选择/重置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>

如果从dropdown2中选择了一个选项,则取消选择/重置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>

我失败的jQuery

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

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

该如何实现？

Answer 1

我怀疑你需要重置select元素,然后进行刷新,如下所示:

$("#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');
});

该代码借用Bootstrap Multiselect站点上的重置按钮代码.请参阅其他示例

Answer 2

另一种取消选择所有选项的方法.(因为多选('刷新')对我不起作用.)

$('#ID').multiselect('deselectAll', false);    
$('#ID').multiselect('updateButtonText');