使用 Bootstrap Select 实现 Optgroup 多选限制

本文旨在介绍如何使用 Bootstrap Select 插件，实现仅允许 Optgroup 中的选项进行多选，而普通选项和 Optgroup 选项互斥的选择效果。我们将通过监听 change 事件，动态控制选项的选中状态，最终实现预期的交互行为。

实现原理

核心思路是监听 select 元素的 change 事件，在事件处理函数中判断当前选中的选项是属于 optgroup 还是普通 option。如果选择了 optgroup 中的选项，则取消所有普通选项的选中状态；反之，如果选择了普通选项，则取消所有 optgroup 中的选项的选中状态。为了保证用户体验，每次选择后需要刷新 Bootstrap Select 插件，使其显示最新的选中状态。

代码实现

以下是实现该功能的 JavaScript 代码：

const levels = document.getElementById("levels");
var levels_selected_previous = Array.from(levels.selectedOptions); // 记录上一次选中的选项
levels.addEventListener("change", (e) => {
e.preventDefault(); // 阻止默认行为，防止页面跳转等
let levels_selected_current = Array.from(levels.selectedOptions); // 获取当前选中的选项
let last_selected_array = levels_selected_current.filter(el => !levels_selected_previous.includes(el)); // 找出本次新选中的选项
if(last_selected_array.length>0){ // 确保有新选项被选中
let last_selected = last_selected_array[0].parentElement.nodeName; // 获取新选中选项的父元素类型（OPTGROUP 或 SELECT）
levels_selected_current.forEach(function(el) {
if(last_selected==="OPTGROUP"){ // 如果新选中的是 OPTGROUP 中的选项
if (el.parentElement.nodeName !== "OPTGROUP") { // 遍历所有选项，取消非 OPTGROUP 选项的选中状态
el.selected = false;
}
} else { // 如果新选中的是普通选项
if (el.parentElement.nodeName === "OPTGROUP") { // 遍历所有选项，取消 OPTGROUP 选项的选中状态
el.selected = false;
} else if(el.parentElement.nodeName !== "OPTGROUP") { // 遍历所有普通选项，取消除本次新选中的选项外的其他普通选项的选中状态
if (el !== last_selected_array[0]) {
el.selected = false;
}
}
}
});
}
$(levels).selectpicker('refresh'); // 刷新 Bootstrap Select 插件，更新显示
levels_selected_previous = levels_selected_current; // 更新上一次选中的选项
});

代码解释：

1. 获取元素： 首先获取 select 元素，并存储上一次选中的选项。
2. 监听 change 事件： 为 select 元素添加 change 事件监听器。
3. 获取当前选中的选项： 在事件处理函数中，获取当前选中的所有选项。
4. 找出新选中的选项: 通过对比上一次和本次选中的选项，找出本次新选中的选项。
5. 判断选项类型： 判断新选中选项的父元素类型是 OPTGROUP 还是 SELECT (即普通选项)。
6. 取消互斥选项： 根据选项类型，遍历所有选项，取消不符合条件的选项的选中状态。
7. 刷新 Bootstrap Select： 调用 $(levels).selectpicker(‘refresh’) 刷新 Bootstrap Select 插件，使其显示最新的选中状态。
8. 更新上一次选中的选项: 将本次选中的选项存储为下一次的上一次选中的选项。

HTML 结构

以下是配合上述 JavaScript 代码使用的 HTML 结构：

<select class="selectpicker" data-container="body" id="levels" multiple>
<option value="1">My tasks</option>
<optgroup id="departments" label="Departments tasks:">
<option value="8">Service</option>
<option value="1">Production</option>
</optgroup>
<option value="3" selected>All tasks</option>
</select>

注意:

• 确保引入了 Bootstrap Select 插件的 CSS 和 JavaScript 文件，以及 jQuery 库。
• select 元素必须添加 multiple 属性，才能支持多选。

注意事项

• 上述代码依赖于 Bootstrap Select 插件和 jQuery 库。
• 在实际应用中，可能需要根据具体需求进行调整，例如添加错误处理、优化性能等。
• data-container=”body” 属性可以防止下拉菜单被父元素遮挡。

总结

通过监听 change 事件，动态控制选项的选中状态，我们可以使用 Bootstrap Select 插件实现灵活的选项选择逻辑。本文提供的代码示例可以作为基础，根据实际需求进行扩展和修改，以满足不同的应用场景。记住在每次修改选项后，一定要调用 $(levels).selectpicker(‘refresh’) 刷新 Bootstrap Select 插件，才能保证显示效果的正确性。