Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap-select not working

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.

like image 627
Fyodor Khruschov Avatar asked Jul 30 '13 08:07

Fyodor Khruschov


2 Answers

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.

like image 119
Kami Avatar answered Oct 04 '22 03:10

Kami


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>
like image 44
IgorAlves Avatar answered Oct 04 '22 03:10

IgorAlves