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

Question

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

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

但这是我在Web应用程序中得到的：

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

Answer 1

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

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

$('.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正常运行。