지정된 <option> 레이블을 가진 <select>을 찾는 CSS 선택기

Question

<select> 요소를 포함하는 <option> 요소를 선택하는 CSS 선택기가 필요합니다. 여기에는 포함 된 <option>이 포함되어 있거나 둘 다 내 요구 사항과 일치하는 지정된 텍스트가 포함됩니다. 예제 HTML :

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

예를 들어 "Second"라는 옵션이 들어있는 경우 <select>를 원합니다. 뭔가 이런 식으로 :

select[option:contains('Second')] 

CSS 선택기를 사용하여이를 달성 할 수있는 방법이 없으면 JQuery 또는 XPath 선택기를 받아 들일 수도 있습니다.

Answer 1

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

가장 간단한 방법은 선택기를 사용하는 것입니다. 포함되지 않은 속성 http://jsfiddle.net/8Tn4Z/

과 값 버전 : 옵션 여기

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

에 작업 예제 http://jsfiddle.net/8Tn4Z/1/

실제 선택 요소 자체를 얻으려면 당신은 단순히에 parent() 방법을 사용할 수 있습니다 위 코드는 다음과 같습니다.

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

다음은 예입니다. http://jsfiddle.net/8Tn4Z/2/