Bootstrap 多选不适用于敲除绑定

Question

我正在使用 this plugin for implementing a multi-select dropdown with checkboxes using KnockoutJs in an ASP.NET MVC web application. I have followed the code in this jsfiddle，但是下拉菜单不起作用，而 fiddle 可以正常工作。

HTML代码：

<select id="status-select" multiple="multiple" class="form-control"
data-bind="options: $root.statuses, selectedOptions: $root.selectedStatuses, multiselect: { includeSelectAllOption: true }">
</select>
...
...
@section require {
    require(['app/viewModel']);
}

<script type="text/javascript">
    $(document).ready(function () {
            $("#status-select").multiselect();
    });
</script>

viewModel.ts:

export class ViewModel {
    statusOptions = [
        "One",
        "Two",
        "Three"
    ];
    statuses = ko.observableArray(this.statusOptions);
    selectedStatuses = ko.observableArray([]);
}

ko.applyBindings(new ViewModel());

以下是我在项目中包含脚本的顺序：

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-multiselect.js"></script>

以下是我得到的输出：

请注意，select 标签内的选项已正确绑定，但由于 ul 标签为空，因此下拉列表中未显示任何内容。我在这里做错了什么？

Answer 1

那是因为您使用的是 Bootstrap 4，而 bootstrap-multiselect 官方只适用于 Bootstrap 3。

也就是说，Github 上有一个名为 Bootstrap 4 compatibility which requests an official support for Bootstrap 4, and a user named @adeeb1 suggests its own implementation, which works - see it live here 的未解决问题。

几点注意事项：

Bootstrap 4 的非官方支持并不完美，但是：在我的演示中，您可以看到 "Select all" 复选框未与其他复选框对齐。
我的演示使用bootstrap.bundle.min.js，（注意使用bundle），其中包括popper.js。您的代码段不使用 bundle 版本，因此要么更改它，要么包括 popper.js.
您的 statusOptions 属性不是 observableArray，因此不会使用双向绑定。我在演示中更改了它。
无需使用$("#status-select").multiselect()，knockout 帮你搞定

Bootstrap 多选不适用于敲除绑定

Bootstrap multiselect not working with knockout binding

asp.net-mvc

jquery

twitter-bootstrap

knockout.js