CODEWITHSUNDEEP
asp.netbootstrap-select
efredz
efredz

Reputation: 13

Bootstrap-Select in ASPNET not showing the options when clicking the button

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.

Upvotes: 0

Views: 3714

Answers (1)

Jerry
Jerry

Reputation: 3586

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

Upvotes: 3

Related Questions