如何通过ID获取Bootstrap dropdown toggle下拉框用户选中的文本内容

错误原因说明 #

你尝试的方法2、3、5是针对原生<select>标签的取值写法，你当前使用的是Bootstrap的Dropdown组件，基于ul/li/a结构实现，没有原生的selected状态和change事件，所以这些写法天然不生效。
方法1、4、6的逻辑方向正确，出现undefined通常是因为事件绑定时机错误（JS代码执行时DOM还未渲染完成，没有绑定上点击事件）、jQuery未正确引入，或者变量作用域问题。

正确实现代码 #

确保代码写在DOM加载完成的回调中，或者放在页面底部、Dropdown组件的HTML代码之后加载：

// 声明变量存储选中的搜索类型，可根据业务需要调整作用域
let selectedSearchType = '';

$(document).ready(function() {
  // 通过ID #SearchType 绑定事件，完全和第一个下拉框隔离
  $('#SearchType .dropdown-item').on('click', function(e) {
    e.preventDefault();
    // 获取选中的文本，trim去除前后多余空白字符
    selectedSearchType = $(this).text().trim();
    // 若需要获取自定义的data-value属性可使用以下写法
    // const searchValue = $(this).data('value');
    
    // 更新按钮文本展示选中内容
    $('#SearchTypeBtn').text(selectedSearchType);
    // 测试输出，可在浏览器控制台查看获取结果
    console.log('选中的搜索类型：', selectedSearchType);
  });
});

后续业务逻辑需要用到选中值时，直接读取selectedSearchType变量即可。

异常排查点 #

如果执行后仍有问题，可按以下顺序排查：

• 确认jQuery已正确引入，且引入位置在你的自定义JS代码之前
• 确认Bootstrap的JS文件已正确引入，保证Dropdown组件可以正常展开收起
• 打开浏览器F12控制台，检查是否有其他JS报错打断了代码执行

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