Bootstrap4下拉按钮显示选中值：多下拉独立操作及文本更新方案

我明白你的痛点——之前BS3的方案没法直接适配BS4，而且多下拉时会出现串改按钮文本的问题。咱们来一步步解决这个问题：

问题根源分析 #

你现有代码的两个核心问题：

1. 使用$(".dropdown-toggle:first-child")会始终选中页面上第一个下拉按钮，导致多下拉场景下点击其他下拉也会修改第一个按钮的文本
2. 用append()会把新文本追加到旧文本后面，导致按钮文本越来越长（比如变成Sort by: Most Recent Popular）

解决方案 #

步骤1：优化HTML结构 #

给触发按钮里的动态文本部分单独加一个容器（比如<span>），这样后续可以精准替换文本，而不是修改整个按钮内容：

<!-- 第一个排序下拉 -->
<div class="btn-group">
  <button class="btn btn-sm dropdown-toggle px-0 mr-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Sort by: <span class="selected-value">Most Recent</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Most Recent</a>
    <a class="dropdown-item" href="#">Popular</a>
    <a class="dropdown-item" href="#">Trending</a>
    <a class="dropdown-item" href="#">Ascending</a>
    <a class="dropdown-item" href="#">Descending</a>
  </div>
</div>

<!-- 第二个筛选下拉（测试多场景） -->
<div class="btn-group mt-3">
  <button class="btn btn-sm dropdown-toggle px-0 mr-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Filter by: <span class="selected-value">All</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">All</a>
    <a class="dropdown-item" href="#">Active</a>
    <a class="dropdown-item" href="#">Inactive</a>
  </div>
</div>

这里用统一的selected-value类名，方便JS代码复用，适配所有下拉场景。

步骤2：编写针对性的jQuery代码 #

核心逻辑是只操作当前下拉对应的按钮，并替换动态文本容器的内容，同时维护选中项的active视觉状态：

$(document).on('click', '.dropdown-item', function(event) {
  // 阻止默认跳转（如果不需要选项的href跳转功能可以加上）
  event.preventDefault();
  
  // 1. 获取当前选中的选项文本
  const selectedText = $(this).text();
  
  // 2. 找到当前下拉对应的触发按钮（通过closest找到父级菜单，再找兄弟按钮）
  const targetToggle = $(this).closest('.dropdown-menu').siblings('.dropdown-toggle');
  
  // 3. 替换按钮里的动态文本
  targetToggle.find('.selected-value').text(selectedText);
  
  // 4. 切换选中项的active类，保持视觉反馈
  $(this).addClass('active').siblings('.dropdown-item').removeClass('active');
});

代码解释 #

• closest('.dropdown-menu')：精准定位当前点击选项所在的下拉菜单，避免影响其他下拉
• siblings('.dropdown-toggle')：找到该菜单对应的触发按钮，确保只修改当前下拉的按钮文本
• find('.selected-value').text(selectedText)：替换动态文本容器的内容，彻底解决旧文本残留问题
• $(document).on('click')：如果你的下拉是动态生成的（比如通过AJAX加载），这种事件委托方式依然能生效

额外提示 #

• 初始状态下，要给默认选中的dropdown-item加上active类，同时按钮里的selected-value文本要和默认项一致，保持视觉统一
• 如果需要保留选项的跳转功能，只需去掉event.preventDefault();即可

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