多个下拉菜单的纯JavaScript显示/隐藏

Question

我将尝试保持这种简单性，尝试创建一个表单，该表单完成后将被打印，在我想要3-4个带有yes或no选项的下拉列表的表单上，某些下拉列表将打开下一个隐藏的表单。 div上的表格，无论答案是什么，如果答案是肯定的，其他人都会打开特定的部分。

是的，我不能使用PHP或Jquery必须使用纯JavaScript

<!DOCTYPE html>
<html>

<body>

<select  onchange="showHideInput(this)">
<option value="0" ></option>
    <option value="1" >Yes</option>
    <option value="2">No</option>
</select>

<select onchange="showHideInput(this)">
<option value="3" ></option>
    <option value="4" >Yes</option>
    <option value="5">no</option>
</select>

<div  id="dropone" style="display:none;">`enter code here`
     words</label>
    <div >
        <input id="a" type="text" name="b" value="" />
    </div>

<div  id="droptwo" style="display:none;">
     more words</label>
    <div >
        <input id="a" type="text" name="b" value="" />
    </div>



</body>

<script>
function showHideInput(sel) {
    var value = sel.value; 
    if(value==1)
        document.getElementById('dropone').style.display = 'block';
    if(value==2)
            document.getElementById('dropone').style.display = 'none';
if(value==4)
        document.getElementById('droptwo').style.display = 'block';
    if(value==5)
        document.getElementById('droptwo').style.display = 'none';


};
</script>
</html>

现在，我承认我并不是最擅长的事情，但是我的问题是我只能使它与此处的功能稍作工作，但如果答案是肯定的，那么dropone仅允许droptwo工作，但我希望稍后再进行答案是否定的时候工作。

任何帮助都非常欢迎！

Answer 1

1.您的开闭标签不匹配，dropone在dropone中。 2.如果您硬编码该值，那么将其扩展到3-4个下拉列表并不是很好，所以我对代码进行了一些重构

 function showHideSwitcher(elementIdToShow) { return { showHideInput: function(sel, showOnValue) { var currentValue = sel.value; if (currentValue === showOnValue + "") { document.getElementById(elementIdToShow).style.display = 'block'; } else { document.getElementById(elementIdToShow).style.display = 'none'; } } } } var dropone = showHideSwitcher("dropone"); var droptwo = showHideSwitcher("droptwo");

 <select onchange="dropone.showHideInput(this, 1)"> <option value="0" ></option> <option value="1" >Yes</option> <option value="2">No</option> </select> <select onchange="droptwo.showHideInput(this, 4)"> <option value="3" ></option> <option value="4" >Yes</option> <option value="5">no</option> </select> <select class="dropOneAlter" onchange="dropone.showHideInput(this, 1)"> <option value="0" ></option> <option value="1" >Yes</option> <option value="0">no</option> </select> <select class="dropTwiAlter" onchange="droptwo.showHideInput(this, 'T')"> <option value="F" ></option> <option value="T" >Yes</option> <option value="0">no</option> </select> <div id="dropone" style="display:none;"> <label>`enter code here` words </label> <div> <input id="a" type="text" name="b" value="" /> </div> </div> <div id="droptwo" style="display:none;"> <label>more words</label> <div> <input id="a" type="text" name="b" value="" /> </div> </div>

Answer 2

我不确定您要问的是什么，但是如果我认为您的大多数问题都可以通过在每个函数调用的开始隐藏元素来解决。 尝试用以下代码替换script标记中的代码：

<script>
function showHideInput(sel) {
    var value = sel.value;
    document.getElementById('dropone').style.display = 'none';
    document.getElementById('droptwo').style.display = 'none';
    if(value==1)
        document.getElementById('dropone').style.display = 'block';
    if(value==2)
            document.getElementById('dropone').style.display = 'none';
    if(value==4)
            document.getElementById('droptwo').style.display = 'block';
    if(value==5)
            document.getElementById('droptwo').style.display = 'none';
};
</script>

看看是否有帮助。

多个下拉菜单的纯JavaScript显示/隐藏

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-22 18:17:40

解决方案2
1 2017-03-22 17:54:08

多个下拉菜单的纯JavaScript显示/隐藏

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-22 18:17:40

解决方案2 1 2017-03-22 17:54:08

解决方案1
2 已采纳 2017-03-22 18:17:40

解决方案2
1 2017-03-22 17:54:08