Question

我正在尝试使用bootstrap 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>

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

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

bootstrap selectpicker不显示选项

1 个答案: