Bootstrap 4多选下拉菜单

Question

我在很多论坛上读到，关于select和multiselect的问题已经在Bootstrap 4 beta版本之后解决了。

不幸的是，我无法像（Bootstrap 3）那样在（Bootstrap 4）中显示multiselect。

Bootstrap 3代码片段：

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Bootstrap 4片段

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

- Kees de Jager

Answer 1

由于bootstrap-select是Bootstrap组件，因此您需要像V3一样将其包含在代码中。

注意:自版本1.13.0以来，此组件仅适用于bootstrap-4。

$('select').selectpicker();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

- dippas

---

更新了bootstrap-select网站：https://developer.snapappointments.com/bootstrap-select/ 和github代码库：https://github.com/snapappointments/bootstrap-select/，以便查找与bootstrap 4兼容的最新1.13+版本插件。 - Brice Roncace

@dippas，selectpicker的功能正常，但我还需要一个“全部”选项。你能帮忙吗？谢谢！ - RakeshKalwa

不确定您是否仍需要，但您可以使用以下代码全选$('.selectpicker').selectpicker('selectAll');，取消选择所有选项则使用$('.selectpicker').selectpicker('deselectAll');。 - Stefan Teunissen

尝试使用这个Bootstrap多选下拉菜单 - https://bbbootstrap.com/snippets/multiselect-dropdown-list-83601849 - Upasana Chauhan

我该如何从服务器端动态地向这个下拉框添加值？ - Dnyati