Bootstrap 多选不显示下拉列表

Question

我在 Knockout JS 中为 bootstrap multiselect 做了自定义绑定。

我不熟悉 Knockout JS 中的自定义绑定。

我为 bootstrap select 使用了这个自定义绑定 jsfiddle 并在 this jsfiddle 用于 bootstrap multiselect 并且还包含我自己的视图模型数据。实际的 bootstrap multiselect 按钮确实显示了，因此用户看到了 multiselect 元素，但在单击它时，没有任何东西掉下来。

检查我的网页显示此输出 html <select>:

HTML（这是正确的 - 问题不在于此）：

    <select multiple="multiple" data-bind="multiselect: _categoryID, 
                optionsText: '_name', 
                optionsValue : '_id', 
                multiselectOptions: { optionsArray: _categories }" class="multiselect" style="display: none;">
<option value="1">Meat-Free Meat</option>
<option value="2">Dairy-Free Dairy</option>
<option value="3">Confectionery</option>
<option value="4">Baking</option>
<option value="5">Dessert</option>
                </select>

这是 bootstrap multiselect 插件添加的 select 下面的位（这是不正确的 - 问题在这里 - 请参阅 <ul>没有 <li>。:

    <div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Dairy-Free Dairy, Confectionery" aria-expanded="false">
<span class="multiselect-selected-text">Dairy-Free Dairy, Confectionery</span> 
<b class="caret"></b>
</button>
<ul class="multiselect-container dropdown-menu">
</ul></div>

为什么单击 bootstrap multiselect 按钮不显示下拉菜单？也就是为什么 <ul> 是空的？ 编辑：关于这个问题的所有工作现在都可以在 this jsfiddle

中尝试

Answer 1

select 有 display:none 因为它是隐藏的。 Bootstrap 为其提供了一个替代前端。您与 Bootstrap 小部件交互，它充当代理来更新 "real" select.

的状态

我不知道为什么下拉列表没有显示在您的应用程序中。正如您所注意到的，它适用于 Fiddle。我最好的猜测是您的选项列表结构不正确。

Answer 2

替换

$(element).multiselect('refresh');

和

$(element).multiselect('rebuild');

Working JsFiddle

Bootstrap 多选不显示下拉列表

Bootstrap Multiselect not displaying the dropdown list

css

knockout.js

bootstrap-multiselect