使用 Bootstrap Select 实现 Optgroup 多选限制-js教程-PHP中文网

使用 Bootstrap Select 实现 Optgroup 多选限制

碧海醫心

发布： 2025-07-20 19:26:11

原创

724人浏览过

使用 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; // 更新上一次选中的选项
});

登录后复制

代码解释：

android rtsp流媒体播放介绍中文WORD版

本文档主要讲述的是android rtsp流媒体播放介绍；实时流协议（RTSP）是应用级协议，控制实时数据的发送。RTSP提供了一个可扩展框架，使实时数据，如音频与视频，的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接，为选择发送通道，如UDP、组播UDP与TCP，提供途径，并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

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

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 插件，才能保证显示效果的正确性。

以上就是使用 Bootstrap Select 实现 Optgroup 多选限制的详细内容，更多请关注php中文网其它相关文章！