引导选择器不显示选项答案

【问题标题】：bootstrap selectpicker not showing options引导选择器不显示选项
【发布时间】：2018-05-01 13:48:38
【问题描述】：

我正在尝试使用引导程序 selectpicker 来使用顶部带有搜索字段的可选列表。但没有按预期工作：

<select class="selectpicker form-control" data-live-search="true" multiple data-max-options="1">
    <option data-tokens="ketchup mustard">GasSanto</option>
    <option data-tokens="mustard">TeixeiraeSantos</option>
    <option data-tokens="frosting">Gavedra</option>
</select>

但在浏览器中却是这样的

我正在像这样加载所需的文件：

<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'css/bootstrap-select.min.css' %}" rel="stylesheet"  type="text/css">      

<script src="{% static 'js/jquery.3.2.1.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/bootstrap-select.js' %}" type="text/javascript"></script>

我在静态文件夹中更新了它们..

【问题讨论】：

您的代码在依赖 Bootstrap 3.x 和 jQuery 1.x（这是 Bootstrap Select 支持的）时按预期工作。如果您尝试使用 Bootstrap 4.x 和 jQuery 3.x，我会得到您遇到的结果。编辑：开发者有支持BS4的测试版：github.com/snapappointments/bootstrap-select/releases/tag/…
@Robert 是对的。不过好消息是，v1.13.0 中正式添加了 Bootstrap 4 支持！

标签： html twitter-bootstrap frontend bootstrap-selectpicker

【解决方案1】：

如果您安装了正确的 Jquery/Bootstrap，您的代码应该可以工作。请看下面的例子：

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css" rel="stylesheet"/>
   </head>
   <body>
      <div class="container">
         <select class="selectpicker form-control" data-live-search="true" multiple data-max-options="1">
            <option data-tokens="ketchup mustard">GasSanto</option>
            <option data-tokens="mustard">TeixeiraeSantos</option>
            <option data-tokens="frosting">Gavedra</option>
         </select>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
   </body>
</html>

【讨论】：

我正在使用 django 静态加载加载这些文件：
您能否使用开发人员工具验证这些文件是否已加载到网络浏览器中？