求助：点击Dropdown列表项时替换按钮文本的实现方案

没问题，这事儿很容易实现，只需要添加一小段jQuery代码就能完成需求。下面是完整的实现代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  // 监听下拉菜单选项的点击事件
  $('.dropdown-item').click(function(e){
    // 阻止链接默认的跳转行为（避免点击后跳到页面顶部）
    e.preventDefault();
    // 获取当前点击项的文本内容
    var selectedText = $(this).text();
    // 替换下拉按钮的显示文本
    $('.dropdown-toggle').text(selectedText);
  });
});
</script>

关键逻辑说明： #

• 页面加载完成后，给所有下拉菜单选项绑定点击事件
• 用e.preventDefault()拦截链接的默认跳转行为，避免不必要的页面滚动
• 通过$(this).text()获取被点击选项的文本内容
• 最后把下拉按钮的文本替换成选中项的内容，完成需求

这样当你点击下拉菜单里的任意一项时，按钮的文本就会立刻同步成你选中的内容啦！

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