如何获取指定文本的select选项value？现有jQuery方法返回空对象

原始HTML结构 #

<select name="sub-concUnit" class="select form-control" required id="id_sub-concUnit">
  <option value="" selected></option>
  <option value="22">mg/ml</option>
  <option value="23">µg/ml</option>
  <option value="24">mM</option>
  <option value="25">µM</option>
</select>

需求 #

需要获取文本为mg/ml的option的value，将该选项设置为选中状态，不能硬编码value值。

尝试的错误代码 #

var sel = $("id_sub-concUnit").find('option[text="mg/ml"]');

以上代码返回空对象，无法实现需求。

解决方案 #

错误原因分析

1. ID选择器缺失#：$("id_sub-concUnit")应该改为$("#id_sub-concUnit")，否则无法定位到目标select元素
2. 不存在[text=xxx]属性选择器：text是元素的文本内容，不是HTML属性，不能用属性选择器匹配

正确实现代码

方法1：使用:contains()选择器（模糊匹配）

适合确定文本唯一的场景：

// 获取文本包含"mg/ml"的option的value
var sel = $("#id_sub-concUnit option:contains('mg/ml')").val();
// 设置该选项为选中状态
$("#id_sub-concUnit").val(sel);

方法2：使用.filter()精确匹配（推荐）

避免模糊匹配的误判，同时可以处理文本前后的空格：

// 精确匹配文本内容为"mg/ml"的option
var sel = $("#id_sub-concUnit option").filter(function() {
  return $(this).text().trim() === 'mg/ml';
}).val();
// 设置选中状态
$("#id_sub-concUnit").val(sel);

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