如何解决jQuery+Bootstrap4下拉菜单选中项不显示的问题？

问题原因 #

你的代码存在两个主要问题，导致选中项无法正常显示：

1. JS事件绑定代码可能在DOM未完全加载时执行，导致事件未能成功绑定到下拉菜单项上。
2. 直接替换按钮的全部文本会把下拉箭头（caret）一并删除，且无法精准更新选中的文字内容。

修复步骤 #

1. 调整HTML结构 #

在下拉按钮内新增一个独立的<span>标签用于承载选中文本，避免替换文本时影响下拉箭头：

<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.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.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" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="selected-text">Select</span>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
      <li>Option 5</li>
      <li>Option 6</li>
    </ul>
  </div>
</div>

2. 修正JS代码 #

将事件绑定代码包裹在$(document).ready()中，确保DOM加载完成后再执行绑定逻辑；同时仅更新新增的文本区域，并添加下拉菜单自动关闭的逻辑提升体验：

$(document).ready(function() {
  $('.dropdown-menu li').on('click', function() {
    // 获取选中项文本并去除多余空格
    var selectedValue = $(this).text().trim();
    // 仅更新按钮内的选中文本，保留下拉箭头
    $('.dropdown-select .selected-text').text(selectedValue);
    // 点击选项后自动关闭下拉菜单
    $('.dropdown').dropdown('toggle');
  });
});

可选优化：标记选中项 #

如果需要让用户直观看到当前选中项，可以给点击的<li>添加激活样式，同时移除其他项的激活状态：

$(document).ready(function() {
  $('.dropdown-menu li').on('click', function() {
    var selectedValue = $(this).text().trim();
    $('.dropdown-select .selected-text').text(selectedValue);
    // 移除所有项的激活样式，给当前点击项添加
    $('.dropdown-menu li').removeClass('active');
    $(this).addClass('active');
    $('.dropdown').dropdown('toggle');
  });
});

可以使用Bootstrap自带的.active类，或自定义样式：

.dropdown-menu .active {
  background-color: #007bff;
  color: #fff;
}

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