In
this article I am going to explain how we can hide and show the div or class on
dropdown selection.
In
the previous article I have explained Calculate total number of days between 2dates in asp.net, how to show and hide the div on buttonclick using Jquery, howto implement pagination in using Angularjs and dirpagination Js and how to search andhighlight the matched textusing AngularJs.
Description:
I
want to show and hide a class on dropdown selection. I have done it using
Jquery.
Implementation:
Add
the Jquery CDN to page and write the below given Jquery snippets of page.
Complete
HTML Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script>
$(function
() {
$('#DropDownList1').on('change', function
() {
if
(this.value == "1")
{
$(".showhide").show();
} else
{
$(".showhide").hide();
}
});
});
</script>
<style>
.showhide{display:none;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:25%">
<legend>Show/Hide
on dropdown selection</legend>
<table>
<tr><td>Show/Hide :</td><td> <asp:DropDownList ID="DropDownList1"
runat="server">
<asp:ListItem Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="1">Show</asp:ListItem>
<asp:ListItem Value="2">Hide</asp:ListItem>
</asp:DropDownList></td></tr>
<tr><td></td><td></td></tr>
<tr class="showhide"><td>Name :</td><td><asp:TextBox ID="txtname" runat="server"></asp:TextBox></td></tr>
<tr><td></td><td></td></tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
0 Comments