Question

我尝试使用bootstrap-select（http://silviomoreto.github.io/bootstrap-select/）并且无法加载任何选项。它呈现了Dropbox但不是选项。我有点迷失，不确定我是否按照正确的顺序加载了正确的依赖项或做了些蠢事。

我开始学习所有这些东西，并且可能在这里做错了什么。我已经创造了一个傻瓜，所以我可以清楚地重现这个问题。

感谢任何帮助！

这是我的代码： https://plnkr.co/edit/f80WGOjxuxBfXomOgEZn?p=preview

<!DOCTYPE html>
  <html>
    <head>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  

     <!-- Jquery javascript version 1.12.4 -->
     <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
     <!--script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.min.js"></script-->

     <!-- Latest compiled and minified CSS for Bootstrap-select-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

     <!-- Latest compiled and minified JavaScript for Bootstrap-select -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

     <!-- (Optional) Latest compiled and minified JavaScript translation files -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>

  </head>

 <body onload="start()">
   <h1>Bootstrap-select Dropdown test!</h1>

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

</html>

Answer 1

你忘了在你的html中包含bootstrap js。

我们走了：https://plnkr.co/edit/JZhBHwTooRVVDpVYb8u0?p=preview

所有你需要的只是

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

PS：请记住将{js文件放在body的末尾> 任何自定义文件必须在库之后加载你从他们那里调用函数并能够覆盖他们的东西。

这就是为什么最终的js部分应该是

<!-- rest of body here -->

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-en_US.min.js"></script>
<script src="script.js"></script>

<!-- close body & html -->

努力使Bootstrap-select工作

1 个答案: