bootstrap下拉框多选-bootstrap 下拉菜单

在Web开发中，有时我们需要一个功能强大的下拉框组件，既能够显示选项列表，又支持多选操作。Bootstrap框架本身提供了基础的下拉菜单功能，但不直接支持多选。为了解决这个问题，我们可以使用一些额外的库或自定义代码来增强Bootstrap下拉菜单的功能。

解决方案

介绍两种实现Bootstrap下拉框多选的方法：
1. 使用第三方插件bootstrap-multiselect
2. 纯自定义实现方式

这两种方法都可以很好地满足需求，开发者可以根据项目实际情况选择合适的方式。

方案一：使用bootstrap-multiselect插件

这是最简单快捷的实现方式。bootstrap-multiselect是一个专门为Bootstrap设计的多选下拉框插件。

实现步骤：

引入必要的资源文件
```html

</p>

<ol start="2">
<li>创建HTML结构
```html</li>
</ol>


  Cheese
  Tomatoes
  Mozzarella
  Mushrooms
  Pepperoni
  Onions


<p>

初始化插件
javascript $(document).ready(function() { $('#example-getting-started').multiselect(); });

这种方式的优点是配置简单，样式美观，且具有丰富的配置选项。

方案二：纯自定义实现

如果你不想依赖第三方插件，也可以通过以下方式来自定义实现：

HTML结构
```html

</p>

<ol start="2">
<li>JavaScript逻辑
```javascript
const dropdown = document.getElementById('customDropdown');
const menuItems = document.querySelectorAll('.dropdown-item');</li>
</ol>

<p>let selectedItems = [];</p>

<p>menuItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();</p>

<pre><code>// 切换选中状态
if (!selectedItems.includes(item.textContent)) {
  selectedItems.push(item.textContent);
  item.classList.add('selected');
} else {
  selectedItems = selectedItems.filter(i => i !== item.textContent);
  item.classList.remove('selected');
}

// 更新按钮文本
dropdown.textContent = selectedItems.length ? selectedItems.join(', ') : 'Select options';

});
});