Question

我正在尝试使用以下概念（请记住，我的JavaScript知识很少）。

提供了一个选择选项，其中包含以下字段：

电子邮件
地址
婚姻

所以......

当选择一个字段时，需要显示该字段的输入，我已经找到了出现单个输入的方法，但是当想要多个选项来获得自己的输入时，它会让人感到困惑！ / p>

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

我哪里错了？我如何制作它，以便每个选项值都有自己的额外输入，在选中时可见。

Answer 1

如果这是您正在寻求的答案，我不能100％确定，但我会试一试。

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

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

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

然后你只需在花括号中插入一些简单的逻辑。例如。将隐藏的div命名为＆＃34; box - ＆＃34;然后是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显示新输入

1 个答案: