Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使网站设计和开发变得更加便捷。在Bootstrap中，下拉框（Dropdown）是一种常见的交互元素，通常用于展示一组可选择的选项。当我们需要在下拉框中实现多选功能时，只需要简单地设置一个属性就能达到目的。这就是“BootStrap 下拉框多选”这个主题所涵盖的知识点。
在HTML中，`<select>`元素用于创建一个下拉列表，通过`<option>`元素定义每个可选项目。要使下拉框支持多选，我们需要在`<select>`标签上添加`multiple`属性。例如：
```html
<select multiple class="form-control" id="exampleSelectMultiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<!-- 更多选项... -->
</select>
```
在这个例子中，`multiple`属性使得用户可以在下拉框中选择多个选项。Bootstrap的类`form-control`则为下拉框提供了标准的样式。
然而，Bootstrap默认的`<select>`元素并不支持多选显示，即无法在下拉框外看到已选中的所有选项。为了改善用户体验并实现多选下拉框的视觉效果，我们可以借助第三方插件，如`bootstrap-multiselect`。这个插件可以将普通的`<select>`元素转换为一个具有多选功能且样式美观的下拉框。
要使用`bootstrap-multiselect`插件，首先需要在项目中引入相关的CSS和JS文件。这些文件通常位于压缩包`bootstrap-multiselect`中，包括`bootstrap-multiselect.css`、`bootstrap.min.js`和`bootstrap-multiselect.js`等。你需要将它们添加到HTML的`<head>`或`<body>`中，并确保其加载顺序正确，通常CSS文件应该先于JS文件加载。
接下来，我们需要对`<select>`元素进行初始化，以应用`bootstrap-multiselect`插件的功能。这可以通过JavaScript（JQuery）完成：
```javascript
$(document).ready(function() {
$('#exampleSelectMultiple').multiselect();
});
```
在这段代码中，`#exampleSelectMultiple`是你要转换的`<select>`元素的ID。`multiselect()`函数则是调用插件，将其转化为多选下拉框。
`bootstrap-multiselect`插件还提供了一些配置选项和方法，例如自定义按钮文本、禁用选项、获取已选值等，这使得我们可以根据项目需求进一步定制多选下拉框的行为。同时，它也支持事件监听，以便在用户操作时执行相应的逻辑。
总结起来，实现“BootStrap 下拉框多选”主要涉及以下几个步骤：
1. 在`<select>`标签上添加`multiple`属性，以启用多选功能。
2. 引入`bootstrap-multiselect`插件的CSS和JS文件。
3. 使用JQuery对`<select>`元素进行初始化，调用`multiselect()`函数。
4. 根据需要，配置插件选项和事件监听，以满足项目的特定需求。
通过以上步骤，我们就可以在Bootstrap项目中创建出功能强大且样式美观的多选下拉框了。
bootstrap-multiselect.zip （10个子文件） 
bootstrap-multiselect 
bootstrap-select.js.map 37KB
