本文详解如何使用 jQuery 实现 Bootstrap 4 自定义下拉菜单的选中状态同步：点击菜单项后，按钮文本实时更新，并为当前选中项添加 active 样式，避免多下拉菜单间事件冲突。
本文详解如何使用 jquery 实现 bootstrap 4 自定义下拉菜单的选中状态同步：点击菜单项后，按钮文本实时更新，并为当前选中项添加 `active` 样式，避免多下拉菜单间事件冲突。
在 Bootstrap 4 中，原生 <select> 元素可直接通过 value 和 selected 属性控制选中状态，但若使用自定义下拉结构（如 .dropdown-menu + <li>），则需手动维护视觉反馈与数据绑定。原代码 $('.dropdown-menu li').on('click', ...) 存在两个关键问题：一是事件委托不足，无法支持动态添加的下拉菜单；二是未隔离作用域，当页面存在多个 .dropdown 时，点击任一下拉项可能错误影响其他下拉按钮。
✅ 正确做法是采用事件委托 + 作用域限定：
- 使用 $(document).on('click', '.dropdown-menu li', ...) 确保动态元素也可响应；
- 通过 li.closest('.dropdown-menu') 定位当前菜单容器，再用 find('li').removeClass('active') 清除同级所有激活态；
- 为当前点击项 li.addClass('active')，实现视觉高亮；
- 最后通过 li.closest('.dropdown').find('.dropdown-select').text(li.text()) 精准更新对应触发按钮的显示文本。
以下是完整可运行示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="col-auto p-2 col-5">
<div class="dropdown">
<button id="dLabel" class="btn btn-outline-secondary dropdown-toggle dropdown-select"
type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
<li class="dropdown-item">Option 4</li>
<li class="dropdown-item">Option 5</li>
<li class="dropdown-item">Option 6</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).on('click', '.dropdown-menu .dropdown-item', function(e) {
e.preventDefault(); // 阻止默认跳转行为（如 a 标签）
const $li = $(this);
// 清空同级所有 active 状态
$li.closest('.dropdown-menu').find('.dropdown-item').removeClass('active');
// 激活当前项
$li.addClass('active');
// 更新对应下拉按钮文本
$li.closest('.dropdown').find('.dropdown-select').text($li.text());
});
</script>
<style>
/* 可选：自定义 active 样式（Bootstrap 4 默认已含 bg-primary） */
.dropdown-menu .dropdown-item.active {
background-color: #007bff !important;
color: white !important;
}
</style>
</body>
</html>? 关键注意事项：
- 推荐使用 .dropdown-item 替代裸 <li>（符合 Bootstrap 4 语义规范，自带 padding、hover 等样式）；
- 必须调用 e.preventDefault()，尤其当 <li> 内含 <a> 或被误触发默认行为时；
- 若需获取值而非纯文本（如 data-value="val1"），可改用 $li.data('value') 提升扩展性；
- 如需支持键盘导航或无障碍访问（ARIA），应补充 aria-current="true" 及焦点管理逻辑。
通过以上方案，你不仅能精准同步显示文本，还能确保 UI 状态清晰、多实例互不干扰，真正实现专业级下拉交互体验。
