如何使用 jQuery 在关闭下拉菜单时触发事件？

Question

我想在用户关闭由“bootstrap-multiselect”UI 控制的下拉菜单时重新加载页面。

这是我迄今为止尝试过的

    $('#ts_client_id').multiselect({
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        selectedClass: null,
        nonSelectedText: 'All Clients',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        maxHeight: 250
    }).on('blur', function () {
        console.log($('#ts_client_id').val());
        window.location.reload();
    });

还有

$('#ts_client_id').multiselect({
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    selectedClass: null,
    nonSelectedText: 'All Clients',
    includeSelectAllOption: true,
    buttonWidth: '100%',
    maxHeight: 250
}).on('hide.bs.dropdown', function () {
    console.log($('#ts_client_id').val());
    window.location.reload();
});

我也尝试过这个，但不起作用

    $('#ts_client_id').multiselect({
        onDropdownHidden: function(event){
            console.log('hi');
            window.location.reload();
        },
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        selectedClass: null,
        nonSelectedText: 'All Clients',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        maxHeight: 250
    });

这是我的 HTML 代码

<select name="ts_client_id[]" id="ts_client_id"  multiple="multiple"  class="form-control width-sm-size row-left-xxsm-margin" >
<option value="2"  selected="selected" >Option 1</option>
<option value="1"  selected="selected" >Option 2</option>
<option value="7"  selected="selected" >Option 3</option>
</select>

但由于某种原因，控制台没有打印任何内容，页面也没有重新加载。

我可以做什么来检测菜单何时关闭，以便我可以重新加载页面。

Answer 1

在文档中清楚地表明：

使用 Twitter 时 onDropdownHide 选项不可用 引导程序 2.3.

以他们的例子：

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-onDropdownHide').multiselect({
            onDropdownHide: function(event) {
                alert('Dropdown closed.');
            }
        });
    });
</script>

Answer 2

您想要设置 onDropdownHidden 选项。它记录在配置选项页面上：

http://davidstutz.github.io/bootstrap-multiselect/#configuration-options

编辑：传递函数作为 onDropdownHidden 的参数似乎对我来说效果很好。

在此发布 Fiddle 以供参考：http://jsfiddle.net/ge81dt1r/2/

你可以尝试改变

window.location.reload();

到

location.href = location.href; 

它应该可以工作，尽管不会随之发送任何发布数据。要了解两者之间的差异并决定哪一个最好，请阅读此处的答案： window.location.href=window.location.href 和 window.location.reload() 之间的区别

Answer 3

您应该使用 onDropdownHide 事件

这里有一个例子

$(document).ready(function() {
  $('#example-getting-started').multiselect({
    onDropdownHide: function(event) {
        alert('Dropdown closed.');
        // to reload the page
        location.reload();
    }
  });
});

参见jsfiddle

Answer 4

Bootstrap 4 和 5 的更新

对于

bootstrap-multiselect

项目，您现在必须使用

templates

指令才能正确使用配置选项

onDropdownHidden

、

onDropdownHide

、

onDropdownShow

和

onDropdownShown

，如下所示：

$('#ts_client_id').multiselect({
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    },
    onDropdownHidden: function(event) {
        alert('Dropdown closed.');
    },
    ...
});

我在仔细阅读 GitHub 页面上的问题列表时找到了这个解决方案

bootstrap-multiselect

。在我的示例中，我已从模板的类列表中删除了

btn btn-primary

，因为我不希望下拉列表看起来像蓝色按钮。

链接这里供参考评论，而且我也复制并粘贴了下面的评论：

有计划支持bootstrap5吗？

它与模板指令一起使用

香草

document.addEventListener('DOMContentLoaded', function() {
  var checkboxes = document.getElementById('multiple-checkboxes');

  $(checkboxes).multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }
  });
});

jQuery

$(document).ready(function () { 
  $("#multiple-checkboxes").multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }, 
  }); 
});