Есть ли способ скрыть SELECT на основе значения другого SELECT, используя только CSS?

Question

У меня есть 2 SELECT элементов, но я хочу отображать второе, только если первое имеет определенное значение.

Я знаю, как это сделать с помощью javascript, но я надеялся, что смогу использовать соседний селектор, чтобы выполнить это с помощью чистого HTML / CSS:

<style>
  select[name=select2] { display:none; }
  select[value=show] + select[name=select2] { display:auto; }
</style>

<select name="select1">
  <option value="show">Show Select 2</option>
  <option value="hide">Hide Select 2</option>
</select>
<select name="select2">
</select>

К сожалению, я не могу заставить это работать. Я думаю, это потому, что value не является настоящим атрибутом SELECT, но я не уверен. Есть идеи, что здесь происходит?

Вот скрипка для тестирования: http://jsfiddle.net/rr24g/

Answer 1

нет, абсолютно невозможно, потому что css является "каскадным", вы не можете идти вверх

/* pseudo code - doesn't work, just demonstrating the problem */
select[name=select1] > option[value=show][selected] ::parent:: + select[name=select2]

вам нужен javascript!

Answer 2

Я собираюсь сказать "Нет".Вы кодируете пользовательский интерфейс на основе бизнес-логики.CSS не был предназначен для этого.Держите его в JavaScript.

Answer 3

Возможно, вы сможете что-то сделать с :hover, используя верхний уровень select s.

В противном случае, я думаю, что решение JS в порядке.