Selectpicker (bootstrap-select) 不起作用，显示禁用的菜单？

Question

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

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

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

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

Answer 1

1) 您是否包含 javascript 文件？如果使用 CDN 或下载它，请确保包含 jquery、bootstrap 和 bootstrap-select。正确设置后，使用 select 选择器 class 到您的 select 元素，它将 auto-initialize bootstrap-select.

2) 如果仅自定义样式 class，请使用：

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

Answer 2

抱歉，如果您的问题已经得到解答，但摘录可能对您有所帮助？

$(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>

Answer 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 工作正常。

Selectpicker (bootstrap-select) 不起作用，显示禁用的菜单？

Selectpicker (bootstrap-select) doesn't work, shows a disabled menu?

javascript

jquery

html

bootstrap-4

bootstrap-select