Question

我知道这已被问了一百万次，但我发誓，我只是检查了20个帖子，没有任何作用......

这是我的代码：

当用户点击＆＃34;电子邮件＆＃34;选项，ID为＆＃34;电子邮件＆＃34;的输入元素应该显示在它下面。

HTML

<select>
    <option selected disabled>Contact me by:</option>
    <option onclick="showInput()">Email</option>
</select>
<input class="email" id="email" placeholder="Email address" type="text" />

JS

function showInput() {
    document.getElementById("email").style.display = "block";
}

CSS

input#email {
    display: none;
}

有人可以向我解释这是怎么回事吗？我在正文结束标记之前有一个JS文件的链接。

Answer 1

使用onChange事件并将事件处理程序移动到<select>元素。还为value元素添加了<option>属性，以简化文本字段识别。最后，在函数中，将select元素传递给事件处理程序，并从选择列表中获取所选选项。

<select onChange="showInput(this)">
    <option selected disabled>Contact me by:</option>
    <option value="email">Email</option>
</select>
<input class="email" id="email" placeholder="Email address" type="text" />

<script>

function showInput(sel) {
    var opt = sel.options[sel.selectedIndex].value
    document.getElementById(opt).style.display = "block"
}

</script>

JSFiddle

现在您可以轻松添加更多联系方式：

<select onChange="showInput(this)">
    <option selected disabled>Contact me by:</option>
    <option value="email">Email</option>
    <option value="phone">Phone</option>
    <option value="address">Mail</option>
</select>
<input class="email"   id="email"   placeholder="Email address"   type="text" />
<input class="phone"   id="phone"   placeholder="Phone number"    type="text" />
<input class="address" id="address" placeholder="Mailing address" type="text" />

Answer 2

根本不是display: none;的问题。您的代码无法正常工作，因为无法将onclick处理程序附加到OPTION元素。试试这个：

<select onchange="this.value === 'email' && showInput()">

这意味着＆＃34;在选定的选项更改检查中是否选择了电子邮件，如果是，请拨打showInput功能＆＃34;。

顺便说一下，您应该将value属性添加到OPTIONS。

<强> See here

纯JS - 显示：阻止不起作用

2 个答案: