Bootstrap 5 选择下拉菜单，多属性折叠

编程问答 2022-04-24

问题描述

我正在尝试使用带有 'multiple' 属性的 select 元素，但我希望它折叠起来，直到用户点击它。问题是 bootstrap 5 不再支持 Bootstrap 4 及更早版本中使用的多选。曾经有一个名为“selectpicker”的 CSS 类，用于在这些下拉列表中选择多个选项。有没有人有解决方案？我真正想要的是选择菜单是一个可以打开和关闭的下拉菜单，而不是一直打开。谢谢！

解决方法

使用 form-select 而不是 selectpicker。

看这个例子

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
,

Bootstrap 5 支持目前正在开发中，因此无法正常工作。 您正在尝试使用 bootstrap-select (refer)-> https://developer.snapappointments.com/bootstrap-select/

可以在 -> https://github.com/snapappointments/bootstrap-select/issues/2505

找到提出的问题

但是，如果使用 github 问题中建议的 bootstrap-select 测试版满足以下条件，则可以使用它：

"bootstrap": "^5.0.0-beta3","bootstrap-select": "^1.14.0-beta2"

简单地说，bootstrap 版本必须是 5.0.0-beta3 或以上 和 bootstrap-select 版本 1.14.0-beta2 或以上

您可以在此处找到 bootstrap-select 的测试版 -> https://github.com/snapappointments/bootstrap-select/releases/tag/v1.14.0-beta2

至于 cdn -> https://cdnjs.com/libraries/bootstrap-select/1.14.0-beta2

我使用 BS 5.0.1 请在下面找到代码

//dont forget to add jquery also or it doesnt work
//below code is to initialize only specific selects-> refer bs-select docs and 
//options,if selectpicker class is added no need to intialize like below so its 
//commented,use as per your requirement
//$('select').selectpicker();
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />


<div class="container mt-5">
  <select class="selectpicker" multiple aria-label="size 3 select example">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

另外请注意，BS5 的 class form-select 没有添加，因为它向 select 添加了不需要的 css 样式 - 尽管可以尝试一下

希望它对你有用...

bootstrap-5bootstrap-selectbootstrap-selectpickerjquery