How to use Bootstrap-select?

前端未结

关注

 4  1528

I’m new to this. I’m trying the Bootstrap-select but I’m not getting the desired effect like here https://developer.snapappointments.com/bootstrap-select/. I ha

相关标签:

4条回答

礼貌的吻别

2021-02-08 00:29
```
$(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
  });
});
```
Your script is declared and therefore executed before the <select class="selectpicker"> -declaration, causing bootstrap-select never being initialized opon .selectpicker (selectpicker doesnt exists when the script is runned). So put it in a document(ready) or after the HTML.
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦毁少年i

2021-02-08 00:37

I had a similar problem. Here is a working example for anyone coming to this question later like I did.

Note there are 2 CSS files and 3 JavaScript files you must include.

$(document).ready(function(e) {
  $('.selectpicker').selectpicker();
});

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

0 讨论(0)

不知归路

2021-02-08 00:52

Include jquery library and bootstrap js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap-master/docs/assets/js/bootstrap.min.js" type="text/javascript"></script>

and code as

$(document).ready(function() {
$('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });
  });

Note: Always used minified css and js, to increase page speed

0 讨论(0)

情话喂你

2021-02-08 00:53

After 1 year I had the same issue. This worked for me:

1-Downloaded the zip files at owner site - https://developer.snapappointments.com/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 bode tag.

<body>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select> 

<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>

<script>
  $(document).ready(function () {
    $('.selectpicker').selectpicker();
  });
</script>
</body>

0 讨论(0)