Multiple dropdown menu's pure javascript show/hide
Question
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.
And yes I can not use PHP or Jquery has to be in pure 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.
Any help whatsoever is more than welcome!
2 answers
solution1
2 ACCPTED 2017-03-22 18:17:40
1.Your open close tag was not matched, and droptwo was in 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
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>
solution2
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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.