在前端开发中，我们经常需要操作 select 元素。有时候，我们需要根据选项的文本内容来选择某个选项。这种情况下，我们可以使用 jQuery 提供的 :contains 选择器来实现。
然而，使用 :contains 选择器可能会出现一些奇怪的问题。比如，我们可能会发现选择器匹配了错误的选项，或者干脆就没有匹配到任何选项。
问题分析
这个问题的原因在于 :contains 选择器并不是严格匹配文本内容，而是模糊匹配。具体来说，它会选择包含指定文本的元素，而不是仅仅选择完全匹配的元素。
考虑以下 HTML 代码：
<select> <option value="1">Apple</option> <option value="2">Pineapple</option> <option value="3">Mango</option> </select>
如果我们使用以下 jQuery 代码来选择文本为 "apple" 的选项：
$('select option:contains("apple")')我们会发现，除了第一个选项外，其他两个选项也被选择了。这是因为 "pineapple" 和 "mango" 都包含了 "apple" 这个字符串。
解决方案
为了解决这个问题，我们需要使用一个更加严格的选择器，比如 filter 方法。filter 方法可以接受一个函数作为参数，在函数中我们可以自定义匹配规则。
具体来说，我们可以编写以下代码：
$('select option').filter(function() {
return $(this).text().toLowerCase() === 'apple';
});这段代码会选择文本为 "Apple" 的选项。它首先选取所有的 option 元素，然后通过 filter 方法筛选出文本为 "Apple" 的元素。
需要注意的是，在比较文本内容时，我们将其转换为小写字母，以避免大小写造成的匹配错误。
实例演示
下面是一个完整的例子，演示了如何选择基于文本的 select 列表：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------ ---------------
------- -----------------------------------------------------------
--------
------------ -
--- ------- - ------------
--- ------- - ---------------------------------------- -
------ ---------------------------- --- --------
---
------------------------ ------
---
---------
-------
------
--------
------- ------------------------
------- ----------------------------
------- ------------------------
---------
-------
-------在这个例子中，我们首先找到了 select 元素，然后通过 filter 方法选择文本为 "Apple" 的选项。最后，我们将该选项设为选中状态。
总结
对于基于文本的 select 列表选择，filter 方法是一个更加严格和可靠的解决方案，避免了 :contains 选择器可能出现的错误匹配问题。同时，我们可以利用 filter 方法自定义匹配规则，实现更加灵活的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15085