Bootstrap-select does not toggle "open" class

Question

Check it out please -> FIDDLE

I downloaded the source from http://silviomoreto.github.io/bootstrap-select/, I really have no idea why it's not toggling "open" class of ".dropdown-toggle" I can fix it by adding some messy scripts, but I prefer the plugin to work right.

the HTML:

<div class="number customdp">
<select class="simple-dropdown" name="number">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

does anybody have a solution ?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

I had this issue because bootstrap.js was included as well as dropdown.js from the bootstrap library. bootstrap.js already included all parts of dropdown.js.

It seems like in this situation, all event handlers were attached twice, resulting in toggling the dropdown twice on click - which results in closing it immediately after opening.