0

I'm using asp.net and bootstrap. I've got a dropdownlist that I want to deuglify using bootstrap-select. The problem is that if I click the dropdownlist, it doesn't show its content, but if I press a key when it's focused it will display the contents of the dropdownlist.

Head:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-select.min.js" />
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />

JS:

<script type="text/javascript">
    $(document).ready(function () {
        $('select').selectpicker();
    });
</script>

The JS is located after the body.

efredz
  • 13
  • 2
  • 7

1 Answers1

3

I wrestled with this problem tonight, although I don't use anything like asp.net. I discovered that in some circumstances the underlying bootstrap events were not firing.

Bootstrap selects use a button to toggle the list of menu items, and use delegation to bind events to to the toggle button. Sometimes when bootstrap-select generates the toggle button the delegation does not work properly.

I found that by using the JavaScript interface on the toggle button after bootstrap-select created it, all was well:

$('select').selectpicker();
$('.dropdown-toggle').dropdown();

Bootstrap Dropdown Javascript API

Jerry
  • 3,391
  • 1
  • 19
  • 28
  • 2
    Thank you, your comment made me realize that I do not only need bootstrap-select.js but bootstrap.js as well. I thought bootstrap is only a css file *hitting the wall* ;) – velop Aug 18 '14 at 09:29