CSS-селектор для поиска <select>с указанной меткой <option> - PullRequest
Новая
       25

CSS-селектор для поиска <select>с указанной меткой <option>

5 голосов
/ 16 августа 2011

Мне нужен селектор CSS, который выбирает элемент <select>, если он содержит <option>, который содержит или равен (оба соответствуют моим требованиям) указанному тексту.Пример HTML: 

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

Я хочу <select>, если он содержит, например, параметр с меткой «Второй».Примерно так: 

select[option:contains('Second')]

Если нет способа добиться этого с помощью селекторов CSS, я бы также принял селекторы JQuery или XPath.

Ответы [ 3 ]

8 голосов
/ 16 августа 2011

Вы не можете сделать это с помощью CSS.

Вы можете использовать этот селектор jQuery (:has() и :contains() не являются частью CSS): 

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

Или это выражение XPath: 

//select[contains(option, 'Second')]
3 голосов
/ 16 августа 2011 
$('select[name="foo"] option:contains("Second")').parent().addClass('selected');

Может быть, это может помочь

2 голосов
/ 16 августа 2011

Самый простой способ сделать это - использовать селектор contains() для опции 

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

Вот рабочий пример: http://jsfiddle.net/8Tn4Z/

и версия с атрибутом значенияне включены: http://jsfiddle.net/8Tn4Z/1/

Чтобы получить сам элемент фактического выбора, вы можете просто использовать метод parent() в приведенном выше коде, чтобы: 

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

Вот пример: http://jsfiddle.net/8Tn4Z/2/

...