本文详解如何使用 jquery 实现 bootstrap 4 下拉菜单的选项高亮与按钮文本同步更新，解决点击后不显示、状态不反馈的问题。
本文详解如何使用 jquery 实现 bootstrap 4 下拉菜单的选项高亮与按钮文本同步更新，解决点击后不显示、状态不反馈的问题。
在 Bootstrap 4 中，原生 <select> 元素可直接绑定 change 事件，但自定义下拉（.dropdown + .dropdown-menu）需手动管理状态。你提供的代码存在两个关键问题：一是事件委托不足（未处理动态生成的 DOM），二是未为选中项添加视觉反馈（如 active 类），导致用户无法感知当前选择。
✅ 正确做法是采用事件委托 + 精确作用域定位：
- 使用 $(document).on('click', '.dropdown-menu li', ...) 替代 $('.dropdown-menu li').on('click', ...)，确保对后续动态添加的下拉项也生效；
- 利用 .closest() 向上查找最近的 .dropdown 容器，避免跨多个下拉菜单时相互干扰；
- 清除同级所有 <li> 的 active 类，并为当前项添加，实现单选高亮；
- 同步更新触发按钮（.dropdown-select）的文本内容。
以下是完整、可运行的解决方案：
<!-- 引入 Bootstrap 4 CSS 和 JS（含 jQuery、Popper、Bootstrap Bundle） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<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>
<!-- 自定义下拉结构 -->
<div class="col-auto p-2 col-5">
<div class="dropdown">
<button id="dLabel" class="dropdown-select btn btn-outline-secondary dropdown-toggle text-left"
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>
<!-- jQuery 逻辑 -->
<script>
$(document).on('click', '.dropdown-menu .dropdown-item', function() {
const $item = $(this);
const $menu = $item.closest('.dropdown-menu');
const $dropdown = $item.closest('.dropdown');
// 清除同级所有选项的 active 状态（推荐使用 Bootstrap 4 的 dropdown-item.active）
$menu.find('.dropdown-item').removeClass('active');
$item.addClass('active');
// 更新按钮文本（保留原始 HTML 结构，仅替换文本）
$dropdown.find('.dropdown-select').text($item.text());
});
</script>
<!-- 可选：增强视觉反馈（Bootstrap 4 默认已支持 .dropdown-item.active 的浅蓝背景） -->
<style>
.dropdown-menu .dropdown-item.active {
background-color: #007bff !important;
color: white !important;
}
</style>? 关键注意事项：
- 推荐使用 dropdown-item 替代裸 <li>，这是 Bootstrap 4 官方推荐的语义化写法，自带 hover/focus 样式且兼容性更好；
- 若需支持键盘导航（如上下键切换、回车确认），应额外监听 keydown 事件并结合 aria-* 属性增强无障碍访问；
- 避免直接操作 .text() 而忽略 HTML 内容（如图标或子元素），若按钮内含复杂结构，建议改用 .html($item.html()) 或提取纯文本（$item.clone().children().remove().end().text()）；
- 生产环境建议将脚本封装为可复用函数，支持多实例初始化，例如 initDropdownSelect('.my-dropdown')。
通过以上方案，每个下拉菜单均可独立响应、准确高亮、同步显示，真正实现“所点即所见”的用户体验。
