Bootstrap Multiselect Dropdown 呈现空下拉菜单答案

【问题标题】：Bootstrap Multiselect Dropdown renders empty dropdownBootstrap Multiselect Dropdown 呈现空下拉菜单
【发布时间】：2016-01-03 23:18:21
【问题描述】：

我正在尝试使用bootstrap multiselect 在我的视图中使用以下代码作为下拉元素：

<select id="msDropdown" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

和

$(document).ready(function () {
    $('#msDropdown').multiselect();
});

当视图被渲染时，包含两个下拉元素：引导下拉列表和一个空下拉列表：从上面的第三个面板中，您还可以看到两个下拉菜单是关联的。在第一个下拉列表中进行选择时，两个下拉列表的标题都会更新。

最后，如果不包含 .multiselect() javascript 命令，则仅显示空下拉列表。空下拉列表有什么问题 - 为什么它会出现，我该如何摆脱它？

提前致谢！

编辑：A jsfiddle with intended behavior。然而在我的应用程序中，显示了两个下拉列表：\

【问题讨论】：

创建一个复制问题的演示。不太清楚你的问题是什么
我可以这样做，但我毫不怀疑它会在隔离的演示环境中工作。无论这里出现什么问题，都必须是由于与我的应用程序进行的其他一些交互。我希望有人以前遇到过同样的问题并能够推荐解决方案。 :]

标签： javascript .net twitter-bootstrap drop-down-menu

【解决方案1】：

原来我有另一个用于 <select> 元素的引导插件，其初始化程序有点过分热心 - 它会在 DOM 中搜索所有匹配的元素并引导它们，从而在这种情况下导致重复的下拉列表。从以下位置更新此其他插件的选择器：

$('select').selectpicker();

到

$('select:not(#msDropdown)').selectpicker();

解决了问题。

【讨论】：