I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list.
Here are some resources:
Check out the source code on Github
Find documentation and examples here
This plug-in works flawlessly on popular browsers like Google Chrome, Mozilla Firefox, and others that I have tested.
However, I'm facing some issues with Internet Explorer (version 9.0.8112) when trying to layout multiple multiselect controls one after another.
In the screenshot below, you can see that IE hides an expanded list "behind" the multiselect control beneath it.
Take a look at the HTML code snippet below:
<div id="filters_inner">
Year:
<select id="example6" class='multiselect_filter' multiple="multiple">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<br/>Quarter:
<select id="Select1" class='multiselect_filter' multiple="multiple">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
</div>
The JavaScript code snippet is as follows:
$(document).ready(function () {
$('.multiselect_filter').multiselect({
numberDisplayed: 1
});
});
I've made some minor CSS modifications (which I have confirmed are not causing the issue):
.btn-group button {
padding: 1px 3px 1px 3px;
font-family: Verdana;
font-size: 11px;
color: #333333;
text-align: left;
}
select {
text-align: left;
}
If anyone has any insight into how this problem can be resolved on IE 9, I would greatly appreciate it.