CSS 选择器查找具有指定 <option> 标签的 <select>答案

【问题标题】：CSS selector to find <select> with specified <option> labelCSS 选择器查找具有指定 <option> 标签的 <select>
【发布时间】：2011-10-28 05:46:07
【问题描述】：

我需要一个 CSS 选择器来选择一个 <select> 元素，如果它包含一个 <option> 包含或等于（两者都符合我的要求）指定的文本。示例 HTML：

<select name="foo">
  <option value="1">First</option>
  <option value="2">Second</option>
</select>

如果<select> 包含例如标记为“第二”的选项，我想要它。像这样的：

select[option:contains('Second')]

如果无法使用 CSS 选择器实现这一点，我也会接受 JQuery 或 XPath 选择器。

【问题讨论】：

【解决方案1】：

你不能用 CSS 做到这一点。

您可以使用这个 jQuery 选择器（:has() 和 :contains() 不是 CSS 的一部分）：

$("select:has(option:contains('Second'))")

或者这个 XPath 表达式：

//select[contains(option, 'Second')]

【讨论】：

【解决方案2】：

$('select[name="foo"] option:contains("Second")').parent().addClass('selected');

也许这会有所帮助

【讨论】：

【解决方案3】：

最简单的方法是在选项上使用contains() 选择器

$("select option:contains('Second')")

这是一个工作示例：http://jsfiddle.net/8Tn4Z/

以及不包含 value 属性的版本：http://jsfiddle.net/8Tn4Z/1/

要获得实际的选择元素本身，您可以简单地在上述代码中使用parent()方法，这样：

var selectElement = $("select option:contains('Second')").parent();

【讨论】：