本文详解如何使用 jQuery 实现 Bootstrap 4 自定义下拉菜单的选中状态同步：点击菜单项后，按钮文本实时更新，并为对应 <li> 添加 active 类以实现视觉反馈。
本文详解如何使用 jquery 实现 bootstrap 4 自定义下拉菜单的选中状态同步：点击菜单项后，按钮文本实时更新，并为对应 `
在 Bootstrap 4 中，原生 <select> 元素可直接绑定 change 事件，但若使用自定义 .dropdown 结构（如 <button> + <ul class="dropdown-menu">），则需手动管理选中状态。原始代码存在两个关键问题：一是事件委托范围过窄（未处理动态生成的下拉项），二是未维护 <li> 的视觉激活状态，导致用户无法直观识别当前选择。
以下为推荐的健壮实现方案：
✅ 正确的事件绑定与状态管理
使用 事件委托（$(document).on('click', ...)）确保即使后续动态添加下拉项也能响应；同时通过 closest() 精确定位所属下拉组件，避免跨多个 .dropdown 实例时的状态污染：
$(document).on('click', '.dropdown-menu li', function() {
const $li = $(this);
// 清除同一下拉菜单内所有 li 的 active 状态
$li.closest('.dropdown-menu').find('li').removeClass('active');
// 为当前项添加 active 类
$li.addClass('active');
// 更新触发按钮的显示文本
$li.closest('.dropdown').find('.dropdown-select').text($li.text());
});✅ 必要的 CSS 样式支持
Bootstrap 4 默认不为 .dropdown-menu li.active 提供背景色，需自行定义样式以提供视觉反馈：
.dropdown-menu .active {
background-color: #007bff !important;
color: white !important;
}⚠️ 注意：!important 是为覆盖 Bootstrap 默认的悬停/焦点样式，确保选中态优先级足够；若项目已定制主题，建议通过 SCSS 变量或更精确的选择器替代。
✅ 完整 HTML 结构（含依赖）
确保引入 Bootstrap 4 CSS 与 JS（含 Popper.js），并保持结构语义清晰：
<div class="col-auto p-2 col-5">
<div class="dropdown">
<button id="dLabel" class="dropdown-select btn btn-outline-secondary dropdown-toggle"
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>? 最佳实践提示：
- 推荐将 <li> 替换为 <a class="dropdown-item">，既符合 Bootstrap 语义规范，又自带默认交互样式；
- 若需存储选中值（如提交表单），建议在按钮上设置 data-value 属性，而非仅依赖文本内容；
- 对于无障碍访问，应为 .dropdown-select 添加 aria-expanded 动态控制，并为菜单项补充 role="option" 和 aria-selected 属性。
通过以上实现，即可构建一个响应及时、状态明确、兼容性强的自定义下拉选择组件。
