CSS - 根据选择框的值隐藏元素(类)

时间:2014-09-17 20:56:39

标签: html css css3

我在<select>中有一个<form>框,当其值为other时,我希望隐藏具有类.applicableSupportCase的元素。我试图用CSS做这件事。我做错了什么?

CSS

.applicableSupportCase  {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
  opacity: 0;
  transform: scaleY(0);
}

HTML

<select class="contactField" id="typeBox">
  <option value="supportCase" selected="selected">Support case</option>
  <option value="other">Other</option>
</select>

<label class="applicableSupportCase">Device:</label>

applicableSupportCase类有更多元素,但你明白了。

3 个答案:

答案 0 :(得分:5)

实际上,css属性选择器不会以您的思维方式看待价值......

虽然Javascript将value属性视为所选选项的值,但CSS只看到标记,而select[value='something']属性选择器实际上会查找此内容:

<select value='something'>

不适用于所选的<option>

通过css-only,您将无法使用所选选项更改其他元素,因为<option>嵌套在<select>标记上,并且css上没有父导航选择

修改

然而,您可以使用javascript对其进行模拟,然后保留您的css选择器。只需触发select on onchange事件即可将名为value的属性设置为DOM select元素:

See Working Fiddle Example

document.getElementById('typeBox').onchange = function() {
    this.setAttribute('value', this.value);
};

答案 1 :(得分:1)

使用<select>项无法完成此操作,但由于复选框和单选按钮的伪类:checked状态,您可以使用这些来完成您想要的操作:

HTML

<input type="radio" id="supportCase" name="radios"> 
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios"> 
<label for="other">Other</label>
    <br />
<label class="applicableSupportCase">Device:</label>

CSS

input[id=other]:checked ~ .applicableSupportCase {
  visibility:hidden;
}

我使用了可见性,但您可以将属性更改为您想要的任何内容。

如果您想要轻松进出,请使用:not(:checked)伪类创建相同的语句:

input[id=other]:not(:checked) ~ .applicableSupportCase {
  //whatever ease(out) you want here
}

JSFiddle:http://jsfiddle.net/ja2ud1Lf/

答案 2 :(得分:0)

我会亲自为隐藏对象创建另一个类(例如&#39; hiddenClass&#39;),并使用类似于以下的jquery:

$( "#typeBox" ).change(function(){
 if($("#typeBox").val()=="other")
 {
     $(".applicableSupportCase").each(function(){
         $(this).addClass("hiddenClass");
     });
 }
});