如何在通过 jQuery 使用另一个 Bootstrap 多选时重置一个 Bootstrap 多选

Question

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

我有两个下拉菜单，当在一个下拉菜单中选择了一个项目时，我需要重置另一个下拉菜单。我一直在尝试使用 onchange jQuery 来做到这一点，但没有成功。

如果从下拉列表 1 中选择了一个选项，则 deselect/reset 下拉列表 2 中的所有内容。

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

如果从下拉列表 2 中选择了一个选项，则 deselect/reset 下拉列表 1 中的所有内容。

    <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 站点上的重置按钮代码借用的。参见 further examples

Answer 2

另一种取消选择所有选项的方法。（因为 multiselect('refresh') 对我不起作用。）

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

Answer 3

这对我有用。

$('#ID').val('').multiselect('refresh');

如何在通过 jQuery 使用另一个 Bootstrap 多选时重置一个 Bootstrap 多选

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

jquery

twitter-bootstrap

bootstrap-multiselect