<select>と指定されたCSSセレクタ<option>ラベル

Question

<option>の要素が含まれている場合は、<select>要素を選択するCSSセレクタが必要です（どちらも自分の要件に一致します）。例HTML：

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

それは例えば、「第二」と表示されたオプションが含まれている場合、私は<select>をしたいです。

select[option:contains('Second')] 

CSSセレクタでこれを達成する方法がない場合は、JQueryまたはXPathセレクタも使用できます。

Answer 1

CSSでこれを行うことはできません。

あなたは（:has()と:contains()は、CSSの一部ではない）、このjQueryのセレクタを使用することができ、次のいずれか

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

またはこのXPath式：

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

Answer 2

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

多分これは

を助けることができます

Answer 3

これを行う最も簡単な方法は、セレクタを使用することです含まれていない属性http://jsfiddle.net/8Tn4Z/

と値を持つバージョン：オプションここで

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

に取り組んだ例http://jsfiddle.net/8Tn4Z/1/

実際のselect要素自体を取得するには、単に上parent()メソッドを使用することができます上記のコードは次のようになります。

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

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