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

找到

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

"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/[email protected]/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/[email protected]/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 的 form-select 类未添加，因为它向 select 添加了不需要的 css 样式 - 不过请随意尝试

希望它对你有用...

Answer 2

Bootstrap v5.1 的多选解决方法

$(document).ready(function () {
          $('#example-getting-started').multiselect({
            buttonClass: 'form-select',
            templates: {
              button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
            }
          });
        });

Answer 3

我的解决方案是使用 class="input-group"，一个巨大的按钮和“复选框”输入列表：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="input-group mb-3 bg-white rounded">
  <button class="btn btn-outline-secondary w-100 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Words</button>
  <ul class="dropdown-menu w-100">
    <li>
      <input class="form-check-input" type="checkbox" value="cash" id="myMultipleCheck" checked disabled name="selected_assets">Great
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="cash" id="myMultipleCheck" name="selected_assets">solution
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="cash" id="myMultipleCheck" checked name="selected_assets">...but
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="cash" id="myMultipleCheck" name="selected_assets">hard
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="cash" id="myMultipleCheck" name="selected_assets"> to
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="cash" id="myMultipleCheck" checked name="selected_assets"> click!
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a>how 2 limit @ n selections?</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

我希望这些复选框更容易选择。

Answer 4

使用

form-select

代替

selectpicker

。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>