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();
    });