Selettore CSS per trovare <select> con l'etichetta <option> specificata

Question

Ho bisogno di un selettore CSS che seleziona un elemento <select> se contiene uno <option> che contiene o equivale (entrambi corrispondono ai miei requisiti) un testo specificato. Esempio HTML:

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

voglio il <select> se contiene ad esempio un opzione "Seconda". Qualcosa di simile a questo:

select[option:contains('Second')] 

Se non v'è alcun modo per raggiungere questo obiettivo con selettori CSS, mi piacerebbe anche accettare JQuery o XPath selettori.

Answer 1

Non è possibile farlo con i CSS.

È possibile utilizzare questo selettore jQuery (:has() e :contains() non sono parte di CSS):

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

O questa espressione XPath:

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

Answer 2

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

Forse questo può aiutare

Answer 3

Il modo più semplice per farlo è utilizzare il selettore sull'opzione

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

Ecco un esempio di lavoro: http://jsfiddle.net/8Tn4Z/

e una versione con il valore non attributo incluso: http://jsfiddle.net/8Tn4Z/1/

Per ottenere l'elemento di selezione vera e propria si può semplicemente utilizzare il metodo parent() su il codice di cui sopra in modo che:

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

Ecco un esempio: http://jsfiddle.net/8Tn4Z/2/