Bootstrap 多选不适用于剔除绑定

Posted

技术标签:

【中文标题】Bootstrap 多选不适用于剔除绑定【英文标题】:Bootstrap multiselect not working with knockout binding 【发布时间】:2020-09-05 11:34:22 【问题描述】:

我正在使用this plugin 在 ASP.NET MVC Web 应用程序中使用 KnockoutJs 实现带有复选框的多选下拉菜单。我已按照this jsfiddle 中的代码进行操作,但下拉菜单不起作用,而小提琴工作正常。

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 标签为空,下拉菜单中没有显示任何内容。我在这里做错了什么?

【问题讨论】:

你成功了吗?如果我能进一步帮助您,请告诉我。 @HeyJude 我无法让它工作。所以我不得不放弃插件并使用引导下拉菜单从头开始实现一个。感谢您的帮助。 【参考方案1】:

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

也就是说,Github 上有一个名为 Bootstrap 4 compatibility 的未解决问题,它请求对 Bootstrap 4 的官方支持,并且名为 @adeeb1 的用户建议了它自己的实现,它可以工作 - see it live here。

几点注意事项:

不过,对 Bootstrap 4 的非官方支持并不完美:在我的演示中,您可以看到“全选”复选框与其他复选框没有对齐。 我的演示使用bootstrap.bundle.min.js,(注意使用bundle),其中包括popper.js。您的 sn-p 不使用 bundle 版本,因此要么更改它,要么包含 popper.js 的独立版本。 您的statusOptions 属性不是observableArray,因此不会使用双向绑定。我在演示中更改了它。 不用$("#status-select").multiselect(),淘汰赛帮你搞定。

【讨论】:

我试过这个。 Knockout 不会自行创建多选。我必须使用$("#status-select").multiselect() 来创建多选下拉菜单。即使我这样做了,当我选择某些东西时,我也没有在selectedOptions 中得到任何值。有什么解决办法吗? 我已经使用 observables 完成了 optionsselectedOptions 绑定。我有一个独立版本的popperjs 包括在内。 popperjs 可以成为下拉菜单不起作用的原因吗? 你可以看到我的演示没有使用$("#status-select").multiselect(),所以你也可能不需要它,它仍然不适合你的原因是别的。按F12查看控制台是否有错误。 控制台中没有错误。如果我不使用$("#status-select").multiselect(),结果是一个普通的多选下拉菜单,我必须使用shift键来选择多个项目。 如果没有看到您的代码的现场演示,很难说。你能做一个jsfiddle吗?如果没有,我建议你拿我的现场演示并在本地运行它,然后将它与你的代码进行比较,看看有什么不同。

以上是关于Bootstrap 多选不适用于剔除绑定的主要内容,如果未能解决你的问题,请参考以下文章

Asp.Net MVC 4 模型绑定和剔除绑定以选择元素

剔除适用于从视图投影矩阵中提取平面,但不适用于投影矩阵

Ldap 身份验证不适用于 Spring Boot

Bootstrap 4轮播不适用于AngularJS UI-Bootstrap

Knockstrap 弹出框不适用于 require.js

MVC 5下拉列表用于编辑视图中的多选值绑定