要查找的CSS选择器 <select>与指定<option>标签

Question

I need a CSS selector that selects a <select> element if it contains an <option> which contains or equals (both would match my requirements) a specified text. Example HTML:

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

I want the <select> if it contains for example an option labeled "Second". Something like this:

select[option:contains('Second')]

If there is no way to achieve that with CSS selectors, i'd also accept JQuery or XPath selectors.

Answer 1

You can't do this with CSS.

You can either use this jQuery selector ( :has() and :contains() are not part of CSS):

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

Or this XPath expression:

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

Answer 2

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

也许这可以帮助

Answer 3

The simplest way to do this is to use the contains() selector on the option

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

Here's a working example: http://jsfiddle.net/8Tn4Z/

and a version with the value attribute not included : http://jsfiddle.net/8Tn4Z/1/

To get the actual select element itself you can simply use the parent() method on the above code so that:

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

Here's an example: http://jsfiddle.net/8Tn4Z/2/