当前位置：首页 > 文章列表 > 文章 > 前端 > BootstrapSelect多选optgroup限制技巧

BootstrapSelect多选optgroup限制技巧

2025-07-20 20:33:19 0浏览收藏

从现在开始，努力学习吧！本文《Bootstrap Select 多选 Optgroup 限制方法》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

实现 Bootstrap Select 中 Optgroup 的多选限制

本文介绍了如何在使用 Bootstrap Select 插件时，实现只允许 Optgroup 中的选项多选，而普通选项与 Optgroup 选项互斥的特殊需求。通过监听 change 事件，判断选中项的类型，并动态调整其他选项的选中状态，最终达到预期的效果。本文将提供详细的代码示例和实现思路，帮助开发者轻松实现类似的功能。

在使用 Bootstrap Select 插件时，有时我们需要实现一种特殊的选择逻辑：只允许 optgroup 中的选项进行多选，而当选中普通选项时，取消所有 optgroup 选项的选中状态；反之，当选中 optgroup 选项时，取消所有普通选项的选中状态。下面提供一种实现该功能的 JavaScript 代码示例。

HTML 结构

首先，确保你的 HTML 结构包含一个使用了 Bootstrap Select 插件的 select 元素，其中包含 option 和 optgroup 元素。例如：

<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">All tasks</option>
</select>

注意，select 元素需要添加 multiple 属性，以支持多选。

JavaScript 代码

接下来，使用 JavaScript 代码监听 select 元素的 change 事件，并根据选中项的类型动态调整其他选项的选中状态。

const levels = document.getElementById("levels");
let 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;
});

代码解释

获取元素和初始状态:
- levels = document.getElementById("levels"); 获取 select 元素。
- levels_selected_previous = Array.from(levels.selectedOptions); 保存上一次选中的选项。
监听 change 事件:
- levels.addEventListener("change", (e) => { ... }); 当 select 元素的值发生改变时，触发事件。
- e.preventDefault(); 阻止默认行为（如果需要）。
获取当前选中状态和最后选中的选项:
- levels_selected_current = Array.from(levels.selectedOptions); 获取当前选中的选项。
- last_selected_array = levels_selected_current.filter(el => !levels_selected_previous.includes(el)); 找出本次事件中新选中的选项。
判断最后选中项的类型并进行处理:
- if (last_selected_array.length > 0) { ... } 确保有新选项被选中。
- last_selected = last_selected_array[0].parentElement.nodeName; 获取最后选中选项的父元素的节点名称（OPTGROUP 或其他）。
循环遍历当前选中的选项，并根据类型取消选中:
- levels_selected_current.forEach(function(el) { ... }); 遍历当前选中的选项。
- 如果最后选中的是 optgroup 中的选项: 取消所有非 optgroup 选项的选中状态。
- 如果最后选中的是普通选项: 取消所有 optgroup 选项的选中状态，并取消除了最后选中项之外的其他普通选项的选中状态。
刷新 Bootstrap Select 插件:
- $(levels).selectpicker('refresh'); 刷新 Bootstrap Select 插件，以更新显示。
更新上一次的选中状态:
- levels_selected_previous = levels_selected_current; 将当前选中的选项保存为上一次的选中状态，以便下次事件处理。