bootstrap实现下拉菜单多选，并获得选择的选项

Bootstrap 的下拉菜单默认只支持单选，如果需要实现多选，可以借助 JavaScript 实现。以下是一种实现方式：

首先，在 HTML 中定义一个下拉菜单，给它一个 id：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="multiSelectDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    选择...
  </button>
  <div class="dropdown-menu" aria-labelledby="multiSelectDropdown">
    <a class="dropdown-item" href="#" data-value="option1">选项1</a>
    <a class="dropdown-item" href="#" data-value="option2">选项2</a>
    <a class="dropdown-item" href="#" data-value="option3">选项3</a>
    <a class="dropdown-item" href="#" data-value="option4">选项4</a>
  </div>
</div>

注意每个选项都有一个 `data-value` 属性，用来存储选项的值。

然后在 JavaScript 中监听下拉菜单的点击事件，以实现多选功能：

var selectedValues = []; // 存储已选中的值

$('.dropdown-menu a').click(function(event) {
  event.preventDefault(); // 阻止链接的默认行为
  var value = $(this).data('value');

  if (selectedValues.includes(value)) {
    // 如果已经选中了这个选项，则取消选中
    selectedValues.splice(selectedValues.indexOf(value), 1);
    $(this).removeClass('active');
  } else {
    // 否则选中这个选项
    selectedValues.push(value);
    $(this).addClass('active');
  }

  // 更新下拉菜单的文本
  var buttonText = '';
  if (selectedValues.length > 0) {
    buttonText = selectedValues.join(', ');
  } else {
    buttonText = '选择...';
  }
  $('#multiSelectDropdown').text(buttonText);
});

这段代码中，我们定义了一个 `selectedValues` 数组来存储已选中的值。每次点击下拉菜单中的选项时，我们先获取该选项的值，然后判断它是否已经被选中。如果已经选中，则将其从 `selectedValues` 数组中删除，并将该选项的样式移除；否则将其添加到 `selectedValues` 数组中，并添加样式表示选中状态。最后，我们更新下拉菜单按钮的文本，显示已选中的选项。