如何让Bootstrap下拉框点击Select时保持展开状态

这个问题其实是Bootstrap下拉组件的默认行为导致的——当你点击下拉菜单内的元素时，事件会向上冒泡到下拉容器，触发组件的隐藏逻辑，所以下拉菜单就关了。要解决这个问题，核心就是阻止Select框的点击事件冒泡，不让它触发下拉的关闭机制。

下面是具体的实现步骤：

1. 基础HTML结构示例 #

假设你的下拉组件结构类似这样：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownTrigger" data-bs-toggle="dropdown" aria-expanded="false">
    选择选项
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownTrigger">
    <!-- 这里是你的Select框 -->
    <select class="form-select mx-3 my-2" style="width: calc(100% - 1rem);">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
</div>

2. 阻止事件冒泡的JavaScript代码 #

你可以用jQuery或者原生JavaScript来实现，两种方式都可以：

方式一：使用jQuery #

如果你的项目已经引入了jQuery，直接给Select框绑定点击事件，阻止冒泡：

$('.dropdown-menu select').on('click', function(e) {
  e.stopPropagation();
});

方式二：原生JavaScript #

如果不想依赖jQuery，用原生JS也可以轻松实现：

// 获取所有下拉菜单里的Select元素
const selectElements = document.querySelectorAll('.dropdown-menu select');

// 给每个Select绑定点击事件
selectElements.forEach(select => {
  select.addEventListener('click', function(e) {
    e.stopPropagation();
  });
});

原理说明 #

Bootstrap的下拉组件内部监听了click事件，当点击事件传递到下拉容器时，会触发菜单的隐藏逻辑。通过e.stopPropagation()方法，我们阻止了Select框的点击事件向上冒泡到父容器，这样下拉组件就不会收到这个点击事件，自然也就不会关闭菜单了。

这样处理后，你点击Select框展开选项时，外层的Bootstrap下拉菜单会保持展开状态，完全不影响Select的正常使用~

内容的提问来源于stack exchange，提问作者anonymoose