javascript - 如何仅使用 CSS 在 Select 显示 'Other' 时显示表单上的文本字段

Question

我正在为客户创建一个表单，如果用户在下拉选择菜单中选择“其他”，将出现一个文本框。否则应该提醒隐藏。我在很多网站上都看到过这种情况。

我可以使用如下代码轻松地为单选按钮执行此操作:

.the-text-input-box {
  opacity: 0;
}

input[type="radio"]:checked ~ .the-text-input-box {
  opacity: 1;
}

...但我不知道如何以相同的方式在选择器中定位“其他”选项。

我希望只使用 CSS 来实现这一目标。

Answer 1

您不能仅使用 CSS 来做到这一点。您将需要 Javascript，因为您选择的选项不是 DOM 中输入框的兄弟:

<select name="mySelect" id="mySelect">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="other">Other</option>
</select>
<input type="text" name="input-box" id="inputBox" cols="30" rows="10" class="hidden"/>

使用复选框是可能的，因为输入框直接跟在您的框后面:

<input type="checkbox" name="checkme" id="checkme"/>
<input type="text" name="myInput" id="myInput" />

所以在 Javascript 中，您需要在您的选择上设置一个事件监听器来隐藏/显示输入框。像这样的东西应该可以解决问题:http://jsfiddle.net/1cevh233/

JS

var selectEl = document.getElementById('mySelect');
var inputBox = document.getElementById('inputBox');
var listener = function(e){
if(selectEl.value == "other"){
       inputBox.className="";
}else{
       inputBox.className="hidden";
}
}


selectEl.addEventListener('change',listener);

CSS

.hidden{
    display:none;
}