[英]Bootstrap multiselect dropdown is not visible
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和bone.js
This is the line which is supposed to do the trick 这是应该做的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 ![在单击时,div也只有btn-group类,是否应该添加开放类] [1]预先感谢
I've just created a jsbin to solve your problem Working demo . 我刚刚创建了一个jsbin来解决您的问题, 工作演示 。
<!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. 请让我知道是否有任何问题。
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!'
});
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-->
Check the Occurrence of the 检查是否发生
if one of them exist more then 1 times then the dropdown will not displayed 如果其中一个存在超过1次,则不会显示下拉菜单
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.