在使用Bootstrap Select开发下拉选择组件时，经常需要对Optgroup分组下的选项设置多选数量限制，避免用户在一个分组内选择过多选项。默认情况下Bootstrap Select仅支持全局的多选配置，无法直接限制单个分组的选择数量，需要通过自定义事件监听和逻辑判断来实现该需求。
实现思路说明
核心逻辑分为三个步骤：首先监听Bootstrap Select的选择变化事件，其次在事件触发时获取当前操作的选项所属的分组，最后统计该分组下已选中的选项数量，若超出限制则取消当前选择并给出提示。
关键步骤拆解
- 绑定
changed.bs.select事件，该事件在选项选择状态变化后触发 - 通过选项的
data-optgroup属性或者父级Optgroup元素关联选项和分组 - 遍历所有已选中选项，统计目标分组的选中数量，判断是否超出限制阈值
- 超出限制时调用
val方法重新设置选中值，移除本次新增的选择
完整代码示例
首先准备基础的HTML结构，引入Bootstrap和Bootstrap Select的相关资源，构建带Optgroup的下拉选择框：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap Select Optgroup多选限制示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">
</head>
<body>
<div class="container" style="margin-top: 50px;">
<select class="selectpicker" multiple data-max-options="6">
<optgroup label="前端框架" data-group="frontend">
<option value="vue">Vue</option>
<option value="react">React</option>
<option value="angular">Angular</option>
</optgroup>
<optgroup label="后端语言" data-group="backend">
<option value="java">Java</option>
<option value="python">Python</option>
<option value="php">PHP</option>
</optgroup>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
接下来添加限制逻辑，设置每个分组最多只能选择2个选项：
$(function() {
// 定义每个分组的最大选择数量
var groupLimit = {
frontend: 2,
backend: 2
};
// 监听选择变化事件
$('.selectpicker').on('changed.bs.select', function(e, clickedIndex, newValue, oldValue) {
// 获取当前操作的选项
var $currentOption = $(this).find('option').eq(clickedIndex);
// 获取选项所属分组
var group = $currentOption.parent('optgroup').data('group');
if (!group || !groupLimit[group]) {
return;
}
// 获取当前分组所有已选中选项
var $groupOptions = $(this).find('optgroup[data-group="' + group + '"] option');
var selectedCount = 0;
var selectedValues = [];
$groupOptions.each(function() {
if ($(this).is(':selected')) {
selectedCount++;
selectedValues.push($(this).val());
}
});
// 判断超出限制
if (selectedCount > groupLimit[group]) {
// 移除当前新增的选择，保留之前的选中值
var newSelectedValues = [];
$groupOptions.each(function() {
if ($(this).is(':selected') && $(this).val() !== $currentOption.val()) {
newSelectedValues.push($(this).val());
}
});
// 合并其他分组的选中值
var allSelected = $(this).val() || [];
var otherGroupValues = allSelected.filter(function(val) {
return selectedValues.indexOf(val) === -1;
});
var finalValues = otherGroupValues.concat(newSelectedValues);
$(this).selectpicker('val', finalValues);
alert('该分组最多只能选择' + groupLimit[group] + '个选项');
}
});
});
注意事项
在实际使用中需要注意几个问题：首先如果动态修改了Optgroup的内容，需要重新绑定事件或者更新分组限制配置；其次如果设置了全局的data-max-options属性，需要和分组限制逻辑做好兼容，避免冲突；最后提示信息可以根据项目需求调整为更友好的交互形式，比如使用页面内的提示框而不是系统弹窗。
通过上述方法就可以实现Bootstrap Select的Optgroup多选限制功能，开发者可以根据实际需求调整分组限制的阈值，适配不同的业务场景。
Bootstrap_SelectOptgroup多选限制前端组件修改时间：2026-06-24 16:30:38