bootstrap selectpicker和bootstrap.js文件之间存在冲突

Question

我发现bootstrap selectpicker不能与bootstrap.js文件一起使用。如果bootstrap.js和selectpicker文件在同一位置，则listpicker无法打开。

<select class="form-control deptId selectpicker" name="depId" placeholder="Department Name">
    <option selected="selected">Select department name</option>
    <option>Depart 1</option>
    <option>Depart 2</option>
    <option>Depart 3</option>
    <option>Depart 4</option>
    <option>Depart 5</option>
</select>

Fiddle Sample

https://jsfiddle.net/uscj19zL/3/

Answer 1

您目前按以下顺序加载以下JavaScript文件：

1. jQuery 2.1.0
2. Bootstrap 3.2.0
3. Bootstrap-Select 1.6.5
4. Bootstrap 3.3.4

第二次调用不同版本的bootstrap是导致问题的原因。摆脱它，你应该没事。

Stack Snippets中的演示

＆＃13;
＆＃13;
$('.selectpicker').selectpicker({
    style: 'btn-default',
    size: 4
});
＆＃13;
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/js/bootstrap-select.js"></script>

<select class="form-control deptId selectpicker" name="depId" placeholder="Department Name">
  <option selected="selected">Select department name</option>
  <option>Depart 1</option>
  <option>Depart 2</option>
  <option>Depart 3</option>
  <option>Depart 4</option>
  <option>Depart 5</option>
</select>
＆＃13;
＆＃13;
＆＃13;

另外，这里是updated Demo in Fiddle