Bootstrap多个选择下拉列表未按预期显示？

Question

我希望有一个下拉列表，用户可以从中选择多个选项。经过一些研究后，我发现了来自this网站的bootstrap多选组件。以下代码是我从网站上复制的代码。但是，它看起来不像下拉列表，如下面的屏幕截图所示。我搜索了很多，但没有找到任何好的解决方案。

我从this网站复制的代码：

<select class="selectpicker" multiple title="Choose one of the following..." data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

脚本部分：

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

    <script>
       $(document).ready(function () {
           $('.selectpicker').selectpicker();
    })
   </script>

实际结果：

预期结果：

谢谢

Answer 1

css文件必须位于link标记而不是script标记中。您需要以下内容才能获得所需的输出：

这些是必需的文件。 注意： css文件的link标记：

<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 DDL：

<select class="selectpicker" multiple data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>

脚本部分：

<script>
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
    })
</script>