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

Question

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

Answer 1

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

提出的问题可以在 -> https://github.com/snapappointments/bootstrap-select/issues/2505找到

但是，如果使用 bootstrap-select 的 beta 版本满足以下条件，则可以使用它，如 GitHub 问题中所建议的：

"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请找到下面的代码

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

//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();

另请注意，未添加 BS5 的 form-select 类，因为它向选择添加了不需要的 css 样式- 不过请随意尝试

希望对你有帮助...

Answer 2

使用form-select而不是selectpicker.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<select class="form-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>