如何使用jQuery根据innerText匹配获取select下拉列表元素

原有代码存在的问题 #

• 选择器字符串拼接错误：contains(后用双引号引入变量，结尾多写了一个单引号，导致选择器语法失效
• jQuery对象用法错误：通过$()获取的是jQuery对象集合，无法直接调用原生DOM的innerText属性，需要先转原生DOM（加[0]索引）或者调用jQuery的.text()方法
• 选择器逻辑错误：:contains是模糊匹配规则，只要选项文本包含目标字符串就会命中，无法满足完全相等的匹配要求，容易出现误匹配
• 判断逻辑缺失：代码中用于对比的value变量未定义，判断逻辑无法正常执行

正确实现代码 #

如果你需要从已选中的选项中筛选出value值和选项文本完全相等的元素，直接用以下代码即可：

// 获取下拉框所有已选中的option
const $selectedOptions = $('#select2-3 option:selected');
const matchedResult = [];

// 遍历选中项
$selectedOptions.each(function() {
  const $current = $(this);
  // 分别获取当前项的value值、去除首尾空格的文本内容
  const currentVal = $current.val();
  const currentText = $current.text().trim();

  if (currentVal === currentText) {
    matchedResult.push($current);
    // 调试输出可按需打开
    // console.log('匹配项：值为%s，文本为%s', currentVal, currentText);
  }
});

// 后续可直接操作matchedResult中存储的jQuery对象，完成选中、取值、禁用等操作

如果需要从下拉框的全部选项（不局限于已选中项）中查找匹配项，只需要把第一行的选择器改成$('#select2-3 option')即可。

注意事项 #

• 遍历jQuery对象集合优先用自带的.each()方法，比手写for循环更适配jQuery的对象特性，减少DOM和jQuery对象混用的报错
• 做文本精确匹配不要用:contains选择器，避免模糊匹配带来的误判
• 取选项文本时建议加.trim()去除首尾的换行、空格，避免HTML排版带来的多余字符导致相等判断失效

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