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

我要说“不”。您正在基于业务逻辑对UI进行编码。 CSS不是为此而设计的。将它保存在javascript中。

Answer 3

您可以使用顶级:hover对select执行某些操作。

否则，我认为js解决方案是有序的。

有没有办法基于另一个SELECT的值仅使用CSS隐藏SELECT？

3 个答案: