Show Table Based on Dropdown selection Using Javascript
Question
Good Morning, I am having issues switching What elements are being shown and hidden based on a dropdown selection. I've tried numerous things, but can't see to get it to work. Below is a sample of the HTML code that I am using:
UPDATE: This is the new code that I tried out, but still nothing is working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
$(document).ready(function () {
$('#TypeOfChange').change(function () {
if ($(this).val() == 'Option 1') {
$('#Table1').css({'display': 'block'});
$('#RequestTypeTableTR').css({'display': 'block'});
} else {
$('#Table1').css({'display': 'none'});
$('#RequestTypeTableTR').css({'display': 'none'});
}
if ($(this).val() == 'Option 2') {
$('#Table2').css({'display': 'block'});
$('#RequestTypeTableTR').css({'display': 'block'});
} else {
$('#Table2').css({'display': 'none'});
$('#RequestTypeTableTR').css({'display': 'none'});
}
});
});
</script>
</head><body>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<table border="0" class="form">
<tr valign="baseline" class="clear">
<td align="right" valign="middle" nowrap="nowrap" class="style8"><h2>General Information</h2></td>
<td valign="baseline"> </td>
</tr>
<tr valign="baseline" class="clear">
<td align="right" valign="top" nowrap="nowrap" class="style9">
<p>*Request Type:</p>
</td>
<td valign="top" class="style8">
<p>
<span id="spryselect5">
<label>
<select name="TypeOfChange" id="TypeOfChange">
<option value="Please Select" selected="selected">Please Select</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
</select>
</label>
<span class="selectInvalidMsg">Please select a valid item.</span><span class="selectRequiredMsg">Please select an item.</span>
</span>
<span class="style1">*</span>
</p>
</td>
</tr>
<tr style="display:none" id="RequestTypeTableTR" valign="baseline" class="clear">
<td valign="middle" nowrap="nowrap"> </td>
<td valign="baseline">
<table style="display:none" id="Table1" width="100%">
<tr>
<td Colspan="2" align="right" valign="middle" nowrap="nowrap" class="style8"><h2>Patient Safety1</h2></td>
</tr>
</table>
<table style="display:none" id="Table2" width="100%">
<tr>
<td Colspan="2" align="left" valign="middle" nowrap="nowrap" class="style8"><h2>Patient Safety2</h2></td>
</tr>
</table>
</td>
</tr>
</table></FORM>
3 answers
solution1
0 2017-03-03 13:01:48
I think you have a lot of syntax errors in this code. For example, here you're closing the function change, so the rest of your code is outside the event "change"
else {
$('#Table2').css({'display':'none'})
$('#RequestTypeTableTR').css({'display':'none'});
}
});
solution2
0 2017-03-03 13:05:41
This is the correct way to indent and organize your javascript code:
$(document).ready(function () {
$('#TypeOfChange').change(function () {
if ($(this).val() == 'Option 1') {
$('#Table1').css({'display': 'block'});
$('#RequestTypeTableTR').css({'display': 'block'});
} else {
$('#Table1').css({'display': 'none'});
$('#RequestTypeTableTR').css({'display': 'none'});
}
if ($(this).val() == 'Option 2') {
$('#Table2').css({'display': 'block'});
$('#RequestTypeTableTR').css({'display': 'block'});
} else {
$('#Table2').css({'display': 'none'});
$('#RequestTypeTableTR').css({'display': 'none'});
}
});
});
You should always code an properly indented code, as it will prevent you from making a lot of mistakes.
solution3
0 2017-03-03 13:30:05
Try this
$(document).ready(function () {
$('#TypeOfChange').change(function () {
if ($(this).val() == 'Option 1') {
$('#Table1').css({'display': 'block'});
$('#Table2').css({'display': 'none'});
$('#RequestTypeTableTR').css({'display': 'block'});
} else if($(this).val() == 'Option 2') {
$('#Table2').css({'display': 'block'});
$('#RequestTypeTableTR').css({'display': 'block'});
$('#Table1').css({'display': 'none'});
}else{
$('#Table2').css({'display': 'none'});
$('#RequestTypeTableTR').css({'display': 'none'});
$('#Table1').css({'display': 'none'});
}
});
});
You are hiding the main table in the else section. That is the problem Hope this 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.
Related Question
Show Table Based on Dropdown Selection
Show and hide div elements based on dropdown selection in html using javascript
Show DropDown based on selection
Show/hide multiple divs based on dropdown selection Javascript
Javascript: Show/Hide div based on dropdown list selection
How to show conditional content based on a dropdown selection? (html+javascript)
Show Hide select options based on previous selection dropdown in Jquery or Javascript
Hide/Show Dropdowns based on previous dropdown selection with Javascript
Populating multiple fields in table based on dropdown selection using javascript, the data should be in arrays
Show/hide dropdown based on another dropdown selection
Related Tags