Selectpicker（引导选择）不起作用，显示禁用的菜单？答案

【问题标题】：Selectpicker (bootstrap-select) doesn't work, shows a disabled menu?Selectpicker（引导选择）不起作用，显示禁用的菜单？
【发布时间】：2019-07-09 03:00:56
【问题描述】：

我正在尝试使用 Bootstrap-Select 中的 selectpicker 来制作多选下拉菜单。这是我的 HTML 文件中的内容：

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

但这是我在我的网络应用程序上得到的：

我无法点击下拉菜单，它已被禁用。如何启用此菜单？

【问题讨论】：

无法复制。工作演示：jsfiddle.net/davidliang2008/u628skn1/3

标签： javascript jquery html bootstrap-4 bootstrap-select

【解决方案1】：

1) 您是否包含了 javascript 文件？如果使用 CDN 或下载，请确保包含 jquery、bootstrap 和 bootstrap-select。一旦设置正确，将 selectpicker 类添加到您的选择元素，它将自动初始化 bootstrap-select。

2) 如果只设置自定义类的样式，请使用：

$('.my-custom').selectpicker();

【讨论】：

当您说 javascript 文件时，您是指 bootstrap-select.min.js 的
不，您不必通过 javascript 对其进行初始化。您可以通过 selectpicker 类来完成。它将自动初始化下拉列表：developer.snapappointments.com/bootstrap-select
代码应该放在哪里？我把它放在标记中，但没有任何改变，选择器仍然被禁用。
您的代码采用哪种方式，通过 CDN 安装？你只是使用纯html文件吗？
我没有使用 CDN，我在本地下载了“bootstrap-select.min.css”和“bootstrap-select.min.css”（以及 bootstrap、jQuery、popper 等）我我开始认为我没有正确设置这些文件的链接。

【解决方案2】：

抱歉，如果您的问题已经得到解答，但 sn-p 可能会有所帮助？

$(function () {
    $('.selectpicker').selectpicker();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

【讨论】：

【解决方案3】：

我终于明白了。当您为 HTML 文件获取 Bootstrap.js、jQuery 和 Popper 时，它们必须按以下顺序排列：

<script src="jquery-3.3.1.slim.min.js"> <script src="popper.min.js"> <script src="bootstrap.min.js">

否则某些事情将无法正常工作。一旦我改变了这个，selectpicker就可以正常工作了。

【讨论】：