使用Bootstrap 4的Bootstrap选择jQuery插件不起作用

时间:2018-09-03 13:27:51

标签: html html5 bootstrap-4 bootstrap-select bootstrap-selectpicker

为什么Bootstrap-selectBootstrap 4不能正常工作? Here is the code, 它正在将搜索输入按钮和选项分别显示为两个单独的按钮。

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

2 个答案:

答案 0 :(得分:3)

如果将 bootstrap-select CSS和JS更新为1.13.1,则可以完美运行

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

请参阅:https://jsfiddle.net/w483cygx/

答案 1 :(得分:1)

您的JSFiddle问题是链接标记中的CSS版本不正确。 CSS网络请求抛出404找不到,因为cdnjs CDN上不存在这样的版本。将版本号从1.13.2更改为1.13.1,可以正常使用。检查JSFiddle

https://jsfiddle.net/35go2hp1/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>