Bootstrap select shows不会替换orignal下拉列表但添加自己的

Question

我正在使用this用于选择组合，在添加其css和Js文件后，我得到了这个结果。 这是我到目前为止所尝试过的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>


<select class="selectpicker show-tick form-control">
  <option>pen</option>
  <option>pencil</option>
  <option selected>brush</option>
</select>

输出。

那么请你看看为什么会发生这种情况？

Answer 1

rel="stylesheet"标记中的问题link缺失。

将rel="stylesheet"添加到link个标记中，它会正常工作。以下示例。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<select class="selectpicker show-tick form-control">
  <option>pen</option>
  <option>pencil</option>
  <option selected>brush</option>
</select>

Answer 2

这是因为加载css文件的顺序不正确。组合css文件必须在loding所有其他css文件后加载，然后问题将被重新调整。如果仍然没有解决，那么css类或属性会覆盖某个地方。

Answer 3

添加脚本以初始化bootstrap select

$('select').selectpicker();

Answer 4

这里有一个 FIDDLE 。注意它们被加载的链接序列。

1. Jquery 3.2.1
2. bootstrap.min.js
3. bootstrap-select.js
4. bootstrap.min.css
5. bootstrap-select.css

可能与您在代码中加载的Jquery版本存在冲突。

<select class="selectpicker show-tick form-control">
  <option>pen</option>
  <option>pencil</option>
  <option selected>brush</option>
</select>