CSS selector to find the <select> with the specified <option> tag

Question

I need a CSS selector that selects an element <select>if it contains <option>, which contains or is equal (both meet my requirements) to the specified text. HTML example:

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

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

select[option:contains('Second')]

If you don't do this with CSS selectors, I also agree with the jQuery or XPath selectors.

Answer 1

You cannot do this with CSS.

jQuery (:has() :contains() CSS):

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

XPath:

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

Answer 2

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

,

Answer 3

- contains()

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

: http://jsfiddle.net/8Tn4Z/

value: http://jsfiddle.net/8Tn4Z/1/

select, parent() , :

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

: http://jsfiddle.net/8Tn4Z/2/