【问题标题】:How to reset one Bootstrap Multiselect when another Bootstrap Multiselect is used via jQuery当通过 jQuery 使用另一个 Bootstrap Multiselect 时如何重置一个 Bootstrap Multiselect
【发布时间】:2016-06-25 18:07:01
【问题描述】:

我正在使用 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');
});

这应该如何实现?

【问题讨论】:

    标签: jquery twitter-bootstrap bootstrap-multiselect


    【解决方案1】:

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

    $("#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

    【讨论】:

    • 没问题。你快到了。
    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:

      这对我有用。

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

      【讨论】:

        猜你喜欢
        • 2010-11-06
        • 1970-01-01
        • 2023-03-16
        • 1970-01-01
        • 1970-01-01
        • 2019-02-10
        • 1970-01-01
        • 1970-01-01
        • 2018-04-14
        相关资源
        最近更新 更多