jquery - 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 选择1.6.5
4. Bootstrap 3.3.4

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

堆栈片段中的演示

$('.selectpicker').selectpicker({
    style: 'btn-default',
    size: 4
});

<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>

另外，这里有一个 updated Demo in Fiddle