多个下拉菜单的纯JavaScript显示/隐藏
[英]Multiple dropdown menu's pure javascript show/hide
问题描述
I'll try to keep this simple, trying to create a form that when completed the page will be printed, on the form I want 3-4 drop down lists with yes or no options, some of the drop downs will open the next hidden div on the form no matter the answer others will open specific parts if the answer is yes. 
我将尝试保持这种简单性，尝试创建一个表单，该表单完成后将被打印，在我想要3-4个带有yes或no选项的下拉列表的表单上，某些下拉列表将打开下一个隐藏的表单。 div上的表格，无论答案是什么，如果答案是肯定的，其他人都会打开特定的部分。
And yes I can not use PHP or Jquery has to be in pure javascript 是的，我不能使用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>
Now I will admit I am not the greatest at any of this, but my problem is I can only get it to slightly work with what I have here but with dropone will only allow droptwo work if the answer is yes but I want it latter on to work when the answer is no two. 现在，我承认我并不是最擅长的事情，但是我的问题是我只能使它与此处的功能稍作工作，但如果答案是肯定的，那么dropone仅允许droptwo工作，但我希望稍后再进行答案是否定的时候工作。
Any help whatsoever is more than welcome! 任何帮助都非常欢迎！
2 个解决方案
解决方案1
2 已采纳 2017-03-22 18:17:40
1.Your open close tag was not matched, and droptwo was in dropone. 1.您的开闭标签不匹配，dropone在dropone中。 2.If you hard code the value it's not very good for you to scale up to 3-4 dropdown, so I refactored the code a bit 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>
解决方案2
1 2017-03-22 17:54:08
I'm not entirely sure what you're asking, but if I think that most of your problems could be fixed by hiding your elements at the beginning of each function call. 我不确定您要问的是什么，但是如果我认为您的大多数问题都可以通过在每个函数调用的开始隐藏元素来解决。 Try replacing the code in the script tag with this: 尝试用以下代码替换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>
and see if that helps. 看看是否有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.