实现 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;
});

代码解释

1. 获取元素和初始状态:

   • levels = document.getElementById("levels"); 获取 select 元素。
   • levels_selected_previous = Array.from(levels.selectedOptions); 保存上一次选中的选项。

2. 监听 change 事件:

   

   灵云AI开放平台

   灵云AI开放平台

   下载
   • levels.addEventListener("change", (e) => { ... }); 当 select 元素的值发生改变时，触发事件。
   • e.preventDefault(); 阻止默认行为（如果需要）。

3. 获取当前选中状态和最后选中的选项:

   • levels_selected_current = Array.from(levels.selectedOptions); 获取当前选中的选项。
   • last_selected_array = levels_selected_current.filter(el => !levels_selected_previous.includes(el)); 找出本次事件中新选中的选项。

4. 判断最后选中项的类型并进行处理:

   • if (last_selected_array.length > 0) { ... } 确保有新选项被选中。
   • last_selected = last_selected_array[0].parentElement.nodeName; 获取最后选中选项的父元素的节点名称（OPTGROUP 或其他）。

5. 循环遍历当前选中的选项，并根据类型取消选中:

   • levels_selected_current.forEach(function(el) { ... }); 遍历当前选中的选项。
   • 如果最后选中的是 optgroup 中的选项: 取消所有非 optgroup 选项的选中状态。
   • 如果最后选中的是普通选项: 取消所有 optgroup 选项的选中状态，并取消除了最后选中项之外的其他普通选项的选中状态。

6. 刷新 Bootstrap Select 插件:

   • $(levels).selectpicker('refresh'); 刷新 Bootstrap Select 插件，以更新显示。

7. 更新上一次的选中状态:

   • levels_selected_previous = levels_selected_current; 将当前选中的选项保存为上一次的选中状态，以便下次事件处理。

注意事项

• 确保已经正确引入了 jQuery 和 Bootstrap Select 插件的 CSS 和 JavaScript 文件。
• 该代码依赖于 Bootstrap Select 插件的 API，如果插件版本不同，可能需要进行适当的调整。
• 可以根据实际需求，修改代码中的判断逻辑，以实现更复杂的选择逻辑。

总结

通过监听 change 事件，并动态调整选项的选中状态，可以实现 Bootstrap Select 插件中 optgroup 的多选限制。 该方法具有一定的通用性，可以根据实际需求进行扩展和修改，以满足不同的选择逻辑需求。