Bootstrap Multiselect Dropdown呈现空下拉列表

Question

我尝试使用以下代码在我的视图中使用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。然而在我的应用程序中，显示了两个下拉菜单：\

Answer 1

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

$('select').selectpicker();

到

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

解决了这个问题。