Menu
I have a page to store user information divided in 4 page. What I want is to change some rows which is on 4th page on the select option located on first page. I am using jQuery to do so but currently unsuccessful. Here are my code please correct me.
$(document).ready(function () {
$('#ddlCategory').change(function () {
if (this.value == "Others") {
$('#Other').show();
} else {
$('#Other').hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select id="ddlCategory">
<option>Choose</option>
<option value="Value1">Value1</option>
<option value="Value2">Value 2</option>
<option value="Others">Others</option>
</select>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Category: " />
</td>
<td>
</td>
</tr>
<tr id="Other" style="display: none">
<table>
<tbody>
<tr>
<td>
<input id="txtOthers" type="text" runat="server" />
</td>
</tr>
<tr>
<td>
<input id="txtOthers" type="text" runat="server" />
</td>
</tr>
<tr>
<td>
<input id="txtOthers" type="text" runat="server" />
</td>
</tr>
</tbody>
</table>
</tr>
</table>
</body>
</html>
647
asked Aug 28 '26 16:08
Using nested table sometimes make conflict in the way elements are displayed. If you put the ID and the style on the table itself and not on its tr container it will work as in the following example:
$(document).ready(function () {
$('#ddlCategory').change(function () {
if (this.value == "Others") {
$('#Other').show();
} else {
$('#Other').hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select id="ddlCategory">
<option>Choose</option>
<option value="Value1">Value1</option>
<option value="Value2">Value 2</option>
<option value="Others">Others</option>
</select>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Category: " />
</td>
<td>
</td>
</tr>
<tr>
<table id="Other" style="display: none">
<tbody>
<tr>
<td>
<input id="txtOthers" type="text" runat="server" />
</td>
</tr>
<tr>
<td>
<input id="txtOthers" type="text" runat="server" />
</td>
</tr>
<tr>
<td>
<input id="txtOthers" type="text" runat="server" />
</td>
</tr>
</tbody>
</table>
</tr>
</table>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
