selector de CSS para buscar <select> con la etiqueta <option>

Question

Necesito un selector de CSS que selecciona un elemento <select> si contiene un <option> que contiene o es igual (ambos coinciden con mis requisitos) un texto específico. Ejemplo HTML:

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

Quiero la <select> si contiene, por ejemplo, una opción llamada "Segunda". Algo como esto:

select[option:contains('Second')] 

Si no hay manera de lograr que con los selectores CSS, también me acepto JQuery o XPath selectores.

Answer 1

No se puede hacer esto con CSS.

También se puede usar este selector jQuery (:has() y :contains() no son parte del CSS):

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

O esta expresión XPath:

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

Answer 2

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

Tal vez esto puede ayudar a

Answer 3

La forma más sencilla de hacerlo es utilizar el selector en la opción

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

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/8Tn4Z/

y una versión con el valor no atribuye incluye: http://jsfiddle.net/8Tn4Z/1/

Para obtener el elemento de selección en sí sólo tiene que utilizar el método parent() en el código anterior de modo que:

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

He aquí un ejemplo: http://jsfiddle.net/8Tn4Z/2/