Question

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

我是Knockout JS中自定义绑定的新手。

我已为this custom binding jsfiddle取了bootstrap select并在this jsfiddle中将其修改为bootstrap multiselect并且还包含我自己的viewmodel数据。实际的bootstrap multiselect按钮确实显示，因此用户可以看到multiselect元素，但点击它后，没有任何内容下降。

检查我的网页会显示<select>的输出html：

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插件添加的选项之下的位（这不正确 - 问题在这里 - 请参阅<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按钮不会导致下拉列表出现？ AKA为什么<ul>为空？ 编辑：现在可以在this jsfiddle

中尝试处理此问题的所有工作

Answer 1

替换

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

带

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

Working JsFiddle

Answer 2

选择包含display:none，因为它已隐藏。 Bootstrap为它提供了替代前端。您与Bootstrap小部件进行交互，它充当代理以更新“真实”选择的状态。

我不知道为什么您的应用中没有显示下拉列表。如你所知，它适用于小提琴。我最好的猜测是你的选项列表结构不正确。

Bootstrap Multiselect不显示下拉列表

2 个答案: