Javascript Bootstrap 多选下拉菜单不可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30569695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap multiselect dropdown is not visible
提问by Neha
Despite the fact that I can make this bootstrap-multiselect work in independent file, I'm not able to see the dropdown list once I click on caret, even if I included it in portal files.
尽管我可以让这个 bootstrap-multiselect 在独立文件中工作，但一旦我点击插入符号，我就无法看到下拉列表，即使我将它包含在门户文件中。
I have already used bootstrap-datepicker, datetimepicker, chosen, and backbone.js
我已经用过 bootstrap-datepicker、datetimepicker、selected、backbone.js
This is the line which is supposed to do the trick
这是应该做的伎俩的线
$('.insightList').multiselect({
selectAllText: true
});
Does anyone have an idea of what can be the cause for not adding class 'open' for 'btn-group'?
有没有人知道不为“btn-group”添加“open”类的原因是什么？
![On click also there is only btn-group class for div whether it should add open class][1] Thanks in advance
![点击也只有btn-group类用于div是否应该添加开放类][1]提前致谢
回答by julien bouteloup
I've just created a jsbin to solve your problem Working demo.
我刚刚创建了一个 jsbin 来解决您的问题Working demo。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<meta charset="utf-8">
<title>Example by @Bneiluj</title>
</head>
<body>
<select id="insightList" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<script id="example">
$('#insightList').multiselect({
enableClickableOptGroups: true
});
</script>
Please, let me know if you have any question.
如果您有任何问题，请告诉我。
回答by Adnan Devops
Make sure your HTML structure for the dropdown is as follows:
确保下拉菜单的 HTML 结构如下：
<select id="example-selectAllText" multiple="multiple" style="display: none;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Check all!</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Option 1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Option 2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3"> Option 3</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="4"> Option 4</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="5"> Option 5</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="6"> Option 6</label></a></li></ul></div>
$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});
回答by TaraGurung
This is the simple multi select am trying to build with the same bootstrap multiselect I have loaded all the necessary jquery and css but still it shows a select box displaying all the options it has not as proposed in above solution.
这是我尝试使用相同的引导程序多选构建的简单多选 我已经加载了所有必要的 jquery 和 css，但它仍然显示一个选择框，其中显示了上面解决方案中没有提出的所有选项。
<select id="multi-select" name="field" multiple="multiple" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- initialize multiselect -->
<script>
$(document).ready(function() {
$('#mult-select').multiselect();
});
</script><!-- //ends-->
回答by Sanketsinh Rathod
Check the Occurrence of the
检查事件的发生
- Bootstrap.js
- Bootstrap-select.js
- Bootstrap-multiselect.js
- Bootstrap.js
- Bootstrap-select.js
- Bootstrap-multiselect.js
if one of them exist more then 1 times then the dropdown will not displayed
如果其中之一存在超过 1 次，则不会显示下拉列表
