I'm using bootstrap 2.3.2 and want to implement element to look like dropdown-menu. There is a solution in github: https://github.com/silviomoreto/bootstrap-select
My code:
<select class="selectpicker">
<option>1</option>
<option>2</option>
</select>
<script type="text/javascript">
$( function() {
$('.selectpicker').selectpicker();
})
</script>
It doesn't work. But when i type
$('.selectpicker').selectpicker();
in console in Chrome DevTools - select changes to dropdown and it works.
You need to call the initialising function after the DOM is ready. This is usually done as part of a $(document).ready()
function block.
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
When you are attempting the command via the console, the DOM is already loaded and available. As such the call works. The above code sample should work similarly.
After 1 year I had the same issue. This worked for me:
1-Downloaded the zip files at owner site - http://silviomoreto.github.io/bootstrap-select/
2-CSS, inside head tag->2files
<link rel="stylesheet" type="text/css" href="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/css/bootstrap-select.css">
<link href="yourPath/bootstrap.min.css" rel="stylesheet">
3-Js files, at the end before close body tag.
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>
<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>
<script>
$(document).ready(function () {
$('.selectpicker').selectpicker();
});
</script>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With