Question

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

这是我到目前为止所尝试的内容

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

显然在documentation：

使用Twitter时，onDropdownHide选项不可用 Bootstrap 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的参数传递似乎对我来说很好。

在此处发布小提琴以供参考：http://jsfiddle.net/ge81dt1r/2/

您可以尝试更改

window.location.reload();

到

location.href = location.href;

它应该可以工作，但不会发送任何帖子数据。要查看两者之间的差异并确定哪个最好，请在此处阅读答案： Difference between window.location.href=window.location.href and 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

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

3 个答案: