Hide or Show div based on option selection
Question
I'm trying to show or hide the div based on the option selected. When Customer is selected, it should show retCustDetails and when Trade is selected it should show tradeCustDetails.
Please let me know what I'm missing on the codes below.
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change()">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
JS
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === '1'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
4 answers
solution1
2 ACCPTED 2015-11-29 06:51:14
There were few minor mistakes in your code, I have corrected it to make it work -
<body> <h2>Place order</h2> Your details Customer Type: <select id="show" name="customerType" onchange="change(this)"> <option value="">Customer Type?</option> <option value="ret">Customer</option> <option value="trd">Trade</option> </select> <div id="retCustDetails" class="custDetails" style="display:none"> Forename <input type="text" name="forename" id="forename" /> Surname <input type="text" name="surname" id="surname" /> </div> <div id="tradeCustDetails" class="custDetails" style="display:none"> Company Name <input type="text" name="companyName" id="companyName" /> </div> <script> function change(obj) { var selectBox = obj; var selected = selectBox.options[selectBox.selectedIndex].value; var retCustDetails = document.getElementById("retCustDetails"); var tradeCustDetails = document.getElementById("tradeCustDetails"); if(selected == 'ret'){ retCustDetails.style.display = "block"; tradeCustDetails.style.display = "none"; } else{ retCustDetails.style.display = "none"; tradeCustDetails.style.display = "block"; } } </script> </body>
solution2
1 2015-11-29 06:51:59
You are using visibility:hidden in your html but in your js your are changing the display property. Change visibility:hidden to display:none .
Use this as change funtion's parameter like onchange="change(this)"
And JS function change to following.
function change(obj) {
var selectBox = obj.value;
var retCustDetails = document.getElementById('retCustDetails');
var tradeCustDetails = document.getElementById('tradeCustDetails');
if(selectBox == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
solution3
1 2015-11-29 07:04:17
This is an alternative method. This too works. Cheers !
<script>
jQuery(function($) {
$('#show').change(function(){
var val = $(this).val();
if( val == 'ret') {
$('#retCustDetails').show();
$('#tradeCustDetails').hide();
} else if(val == 'trd') {
$('#tradeCustDetails').show();
$('#retCustDetails').hide();
} else {
$('#tradeCustDetails').hide();
$('#retCustDetails').hide();
}
});
});
</script>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
solution4
0 2015-11-29 06:52:57
pass the this as argument to the change() method. Also change the if condition as like below
if(selected === 'ret'){
//...
}
because you get the selected value, it give either "ret" or "trd"
Change the tradeCustDetails visibility: hidden to display: none Try this code.
function change(obj) { //alert(obj); var selectBox = obj; var selected = selectBox.options[selectBox.selectedIndex].value; var retCustDetails = document.getElementById("retCustDetails"); var tradeCustDetails = document.getElementById("tradeCustDetails"); if(selected === 'ret'){ retCustDetails.style.display = "block"; tradeCustDetails.style.display = "none"; } else{ retCustDetails.style.display = "none"; tradeCustDetails.style.display = "block"; } }
<h2>Place order</h2> Your details Customer Type: <select id="show" name="customerType" onchange="change(this)"> <option value="">Customer Type?</option> <option value="ret">Customer</option> <option value="trd">Trade</option> </select> <div id="retCustDetails" class="custDetails"> Forename <input type="text" name="forename" id="forename" /> Surname <input type="text" name="surname" id="surname" /> </div> <div id="tradeCustDetails" class="custDetails" style="display:none"> Company Name <input type="text" name="companyName" id="companyName" /> </div>
Hope this will help you.
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.
Related Question
Show or hide a div based on selection
Show and hide div based on the selection
Show or hide div based on selection
jQuery - On Selection option change, show/hide DIV
Show div based on selection & hide previous div
javascript - hide / show div based on selection
Hide or show div based on dropdown selection
Hide/show 2 div based on jpg button selection
Hide/Show div based on checkbox selection
Show/hide div based on radio button selection
Related Tags