如何选中Bootstrap下拉菜单并将选中项显示在下拉标题处

这需求太常见啦！咱们只需要给现有代码加一点点标记，再写几行简单的JS代码就能轻松搞定。

修改后的HTML代码 #

首先调整下你的HTML结构，把下拉标题的文本单独放在一个span里，方便后续替换，同时给菜单项统一加个类：

<li class="dropdown">
  <a class="dropdown-toggle toggle2" data-toggle="dropdown" href="#">
    <span id="selectedDropdownText">Material Type</span>
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu menu2">
    <li><a href="#" class="dropdown-item">Wood</a></li>
    <li><a href="#" class="dropdown-item">Mud</a></li>
    <li><a href="#" class="dropdown-item">Cloth</a></li>
    <!-- 其他菜单项 -->
  </ul>
</li>

实现逻辑的JS代码 #

因为Bootstrap本身依赖jQuery，咱们直接用jQuery来写，简单高效：

// 监听下拉菜单项的点击事件
$('.dropdown-item').on('click', function(e) {
  // 阻止a标签默认的跳转行为（你的href是#，不需要跳转）
  e.preventDefault();
  // 获取当前点击菜单项的文本内容
  const selectedText = $(this).text();
  // 把下拉标题里的文本替换成选中的内容
  $('#selectedDropdownText').text(selectedText);
});

额外小提示 #

如果你的菜单项是动态生成的（比如从后端加载），那就要用事件委托来绑定点击事件，代码改成这样：

$(document).on('click', '.dropdown-item', function(e) {
  e.preventDefault();
  const selectedText = $(this).text();
  $('#selectedDropdownText').text(selectedText);
});

这样不管后续新增多少菜单项，点击事件都能正常生效~

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