📅 最后修改于: 2023-12-03 15:11:15.105000 🧑 作者: Mango
这是一款用于 Bootstrap 的 jQuery 多选插件，可以在表单中为用户提供可视化的多选选项。
可以通过 npm 或者直接下载代码库来安装这个插件。
在终端中执行以下命令：
npm install bootstrap-multiselect
你可以通过访问以下链接来下载代码库：
https://github.com/davidstutz/bootstrap-multiselect
通过以下代码，就可以在页面中初始化 Bootstrap 多选插件：
$(function() {
$('#example').multiselect();
});
Bootstrap 多选插件提供了多种选项设置，例如：
buttonClass：设置按钮的样式类名buttonWidth：设置按钮的宽度buttonContainer：设置按钮容器的元素includeSelectAllOption：是否显示“全选”选项selectAllText：自定义“全选”选项的文本allSelectedText：当所有选项都被选中时的文本以下是一个示例：
$(function() {
$('#example').multiselect({
buttonClass: 'btn btn-default',
buttonWidth: 'auto',
includeSelectAllOption: true,
selectAllText: '全选',
allSelectedText: '已全选'
});
});
以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Multiselect Plugin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head>
<body>
<div class="container">
<form>
<select id="example" multiple="multiple">
<option value="chevrolet">雪佛兰</option>
<option value="ford">福特</option>
<option value="honda">本田</option>
<option value="nissan">日产</option>
<option value="toyota">丰田</option>
</select>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<script>
$(function() {
$('#example').multiselect();
});
</script>
</body>
</html>
Bootstrap 多选插件是一个非常有用的工具，可以在表单中提供可视化的多选选项。它有多种选项可供自定义，可以适应不同的需求。