实现 Bootstrap Select 仅 Optgroup 多选的技巧

本文旨在解决在使用 Bootstrap Select 插件时，如何实现仅允许 optgroup 中的选项进行多选，而普通 option 选项与 optgroup 选项互斥选择的问题。通过监听 change 事件并动态控制选项的 selected 属性，提供了一种可行的解决方案，并附带示例代码，方便开发者快速实现类似需求。

在使用 Bootstrap Select (v1.13.18) 时，有时我们需要实现一种特殊的选择逻辑：只允许 optgroup 中的选项进行多选，而普通的 option 选项与 optgroup 选项之间是互斥的。也就是说，如果选择了普通的 option，则所有 optgroup 中的选项都会被取消选择；反之，如果选择了 optgroup 中的选项，则所有普通的 option 都会被取消选择。下面介绍如何通过 JavaScript 代码实现这一功能。

HTML 结构

首先，我们需要一个包含 optgroup 和 option 的 select 元素。例如：

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

JavaScript 代码

接下来，使用 JavaScript 代码来监听 select 元素的 change 事件，并根据选择的选项类型来动态控制其他选项的 selected 属性。

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;
levels_selected_current.forEach(function(el) {
if(last_selected==="OPTGROUP"){
if (el.parentElement.nodeName !== "OPTGROUP") {
el.selected = false;
}
} else {
if (el.parentElement.nodeName === "OPTGROUP") {
el.selected = false;
} else if(el.parentElement.nodeName !== "OPTGROUP") {
if (el !== last_selected_array[0]) {
el.selected = false;
}
}
}
});
}
$(levels).selectpicker('refresh');
levels_selected_previous = levels_selected_current;
});

代码解释

1. 获取元素和初始状态: 首先获取 select 元素，并使用 Array.from(levels.selectedOptions) 获取初始选中的选项数组 levels_selected_previous。
2. 监听 change 事件: 为 select 元素添加 change 事件监听器。
3. 获取当前选中和上次选中的差异: 在 change 事件处理函数中，获取当前选中的选项数组 levels_selected_current。 通过 filter 方法，找到本次事件中新增选中的选项 last_selected_array。
4. 判断新增选项的类型: 判断 last_selected_array 是否为空，如果不为空则获取新增选项的父元素的节点名称 last_selected，判断是 OPTGROUP 还是 OPTION。
5. 遍历当前选中的选项，进行选择控制: 遍历 levels_selected_current 数组，对每个选项进行判断。
   • 如果 last_selected 是 OPTGROUP，则取消选择所有非 OPTGROUP 中的选项。
   • 如果 last_selected 不是 OPTGROUP，则取消选择所有 OPTGROUP 中的选项，并且取消选择所有非本次新增选中的 OPTION 选项。
6. 刷新 Bootstrap Select: 调用 $(levels).selectpicker(‘refresh’) 刷新 Bootstrap Select 插件，使更改生效。
7. 更新状态: 更新 levels_selected_previous 数组，为下次事件做准备。

注意事项

• 确保已经正确引入了 jQuery 和 Bootstrap Select 插件。
• 此代码依赖于 Bootstrap Select 插件的 API，如果插件版本不同，可能需要进行适当调整。
• 在实际应用中，可以根据具体需求进行修改和优化。例如，可以添加一些错误处理机制，或者对代码进行更细致的封装。
• 如果你的 optgroup 没有设置 multiple 属性，虽然这段代码可以实现互斥选择，但是 optgroup 本身仍然无法多选。

总结

通过监听 change 事件并动态控制选项的 selected 属性，我们可以实现 Bootstrap Select 插件中 optgroup 选项的特殊选择逻辑。这种方法具有一定的灵活性，可以根据具体需求进行定制。希望本文能够帮助你解决在使用 Bootstrap Select 插件时遇到的类似问题。