如何使用jQuery获取下拉选中值对应的元素？

嘿，我看你现在的问题是用jQuery只能拿到下拉选中的文本值，但想要获取对应的<li>或者<a>元素对吧？结合你给出的HTML结构，这应该是用了类似bootstrap-select这类自定义下拉组件（原生select不会生成这种ul/li/a的嵌套结构），我给你几个靠谱的解决方案：

方法1：通过aria-selected属性直接定位 #

这类自定义下拉组件在选中选项时，会把对应<a>标签的aria-selected属性设为true（你示例里的false是未选中状态），所以可以直接用属性选择器定位：

// 获取选中的<a>元素
const selectedOption = $('.dropdown-menu.inner a[aria-selected="true"]');
// 要是需要对应的<li>元素，直接取它的父元素就行
const selectedLi = selectedOption.parent('li');

// 之后你可以操作这个元素，比如获取它的data属性
console.log(selectedLi.data('original-index'));

方法2：利用组件原生API（如果是bootstrap-select这类组件） #

如果你的下拉是bootstrap-select生成的，直接用它的内置方法会更可靠，避免DOM结构变化导致的问题：

// 先找到你的原生select元素（替换成你实际的选择器）
const $select = $('#your-select-id');

// 方法A：通过原生选中的option关联到对应的li
const selectedLi = $select.find('option:selected').closest('.dropdown-menu.inner li');

// 方法B：用bootstrap-select的自带方法获取选中元素
const selectedElement = $select.selectpicker('val', null, true);

方法3：监听选中事件（自定义下拉场景） #

如果是你自己手写的下拉组件，那可以在点击选项的时候直接捕获当前元素：

// 绑定点击事件到下拉选项
$('.dropdown-menu.inner a').on('click', function() {
  const currentSelectedA = $(this); // 这里就是当前选中的<a>元素
  const currentSelectedLi = currentSelectedA.parent('li');
  
  // 比如获取它的索引或者文本
  console.log(currentSelectedLi.data('original-index'));
  console.log(currentSelectedA.text().trim());
});

// 要是下拉是动态生成的（比如AJAX加载），用事件委托更稳妥
$(document).on('click', '.dropdown-menu.inner a', function() {
  const currentSelectedA = $(this);
  // 后续操作同上
});

小提醒 #

• 确保你的选择器足够精准，如果页面有多个下拉组件，最好给目标下拉的父元素加个唯一类，比如.user-profile-dropdown .dropdown-menu.inner，避免选中错误的元素。
• 如果DOM结构后续有变更，优先用组件的原生API，比直接操作DOM更稳定。

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