Bootstrap-select does not toggle "open" class
It has a dependency on twitter bootstrap. Include their CSS and JavaScript files like so:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
See this updated fiddle with the CSS and JS included, and it seems to work just fine.
I had the same issue. Even after having the references right, the dropdown didn't show on click. So I included the following code and it worked.
$(document).ready(function () {
$(".selectpicker").selectpicker();
$(".bootstrap-select").click(function () {
$(this).addClass("open");
});
});
The correct order of dependencies did not solve the problem for me. I tried DynoMyte's solution. The code opens a dropdown, but do not close it. So I added a few more lines that fix this.
$(".selectpicker").selectpicker();
$(".bootstrap-select").click(function () {
$(this).addClass("open");
});
$(document).click(function(){
$(".bootstrap-select").removeClass("open");
});
$(".bootstrap-select").click(function(e){
e.stopPropagation();
});