选择特定的表单选项后，会出现一个新的输入，使用 JavaScript

Question

我正在尝试让以下概念发挥作用（切记我的 JavaScript 知识很少）。

提供了一个 select 选项，其中的字段如下：

电子邮件
地址
结婚

等等...

当一个字段被 selected 时，该字段的输入需要出现，我已经找到了让单个输入出现的方法，但是当想要多个选项有自己的输入时令人困惑的地方！

<select name="retrieveMarriage" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';">
 <option value='' disabled selected style='display:none;'>Select Field To Update</option>
<option value="No">Address</option>
<option value="Yes">Email</option>
</select>
<div id="otherdetail" style="display: none;">
<input type="text" placeholder="Enter NEW Email..."       onClick="$(this).removeClass('placeholderclass')" class="dateclass placeholderclass">
</input></div><br>

我哪里错了？我该怎么做才能让每个选项值都有自己的额外输入，在 selected 时可以看到这些输入。

Answer 1

我不是 100% 确定这是否是您正在寻找的答案，但我会试一试。

而不是编程 JavaScript 内联，你应该在 <script></script> 标签或 JavaScript 文件中使用它。所以我所做的是在 select 字段上设置一个事件监听器，它的作用是在您单击时监听，例如：

var select = document.getElementById('retrieveMarriage');

// Where it says EVENT you can insert any event that you would like
select.addEventListener('EVENT', function() {});

然后你只需在花括号中插入一些简单的逻辑。例如。将隐藏的 div 命名为类似 "box-" 的名称，后跟您从 this.selectedIndex.

获得的数字之一

var select = document.getElementById('retrieveMarriage');
var currentOption = 0;

// Add event listener that listens on when you click "select"
select.addEventListener("click", function() {
    // If one of the other options are selected, then hide it and set it to empty
    if(currentOption > 0) {
        document.getElementById('box-' + currentOption).style.display = 'none';
        document.getElementById('box-' + currentOption).firstChild.value = '';
    }
    // Set current option to be current option
    currentOption = this.selectedIndex;
    // Set box-N to show
    document.getElementById('box-' + currentOption).style.display = 'block';
});

您可以在这个 jsfiddle http://jsfiddle.net/6ypytx2p/

中查看我的解决方案

这是您可以使用的事件的完整列表。 https://developer.mozilla.org/en-US/docs/Web/Events

希望我能够回答你的问题。

选择特定的表单选项后，会出现一个新的输入，使用 JavaScript

When a specific form option is selected a new input appears, using JavaScript

html

javascript

php

visibility