如何在选择显示“其他”时，在表单上显示文本字段答案

【问题标题】：How to reveal a Text Field on a form when the Select shows 'Other' using just CSS如何在选择显示“其他”时，在表单上显示文本字段
【发布时间】：2015-05-24 02:37:09
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

可能与CSS selector for select option value重复
我认为在完整的 CSS 中是不可能的，因为您可以测试选项元素但包含在选择元素中，并且 CSS 不会返回父元素以使用兄弟选择器

标签： javascript html css forms

【解决方案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/

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;
}

【讨论】：