问题
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.
回答1:
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
来源:https://stackoverflow.com/questions/22188515/bootstrap-select-in-aspnet-not-showing-the-options-when-clicking-the-button