Question

我在<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类有更多元素，但你明白了。

Answer 1

实际上，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); };

Answer 2

使用<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/

Answer 3

我会亲自为隐藏对象创建另一个类（例如＆＃39; hiddenClass＆＃39;），并使用类似于以下的jquery：

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

CSS - 根据选择框的值隐藏元素（类）

CSS

HTML

3 个答案: