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.

I have already used bootstrap-datepicker, datetimepicker, chosen, and backbone.js

This is the line which is supposed to do the trick

            selectAllText: true

Does anyone have an idea of what can be the cause for not adding class 'open' for 'btn-group'?

![On click also there is only btn-group class for div whether it should add open class][1] Thanks in advance


I've just created a jsbin to solve your problem Working demo.

    <!DOCTYPE html>
<script src=""></script>
<link href="" rel="stylesheet" type="text/css" />
<script src=""></script>

<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="" type="text/css"/>

  <meta charset="utf-8">
  <title>Example by @Bneiluj</title>

  <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>

<script id="example">
  enableClickableOptGroups: true

Please, let me know if you have any question.

Make sure your HTML structure for the dropdown is as follows:

<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>
<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>

  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.

<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>
 <!-- initialize multiselect -->
   $(document).ready(function() {
</script><!-- //ends-->

Check the Occurrence of the

  • Bootstrap.js
  • Bootstrap-select.js
  • Bootstrap-multiselect.js

if one of them exist more then 1 times then the dropdown will not displayed

Need Your Help

How to set viewcontroller background image on iOS6 in 4 inch screen

ios iphone objective-c ios6 ios7

I need one clarification i have image size 640×1136 it is set view controller background full view this is set fine in iOS 7 because the status bar merge with view.