Introduction:
In this article i am going to explain How to Show or Hide the controls/contents
placed inside div tag on selecting the item from dropdownlist in asp.net using
jQuery.In previous article i explained How to Create jQuery scrollable gridview with fix header and Show image preview before uploading using jQuery and JavaScript to validate file size before uploading file and Ajax CascadingDropDown example in asp.net to Fill DropDownList with Countries,states and cities and Show jQuery tooltip message on mouse over and Clear or reset all asp.net controls
Description: While working on
asp.net projects, it is very common requirement to show or hide controls e.g.
textbox, dropdownlist or other control based on dropdownlist selected value.
For example: In this demo example user
has to select the Payment Mode either cash or cheque. If user selects the
cheque then we need to get the bank name and cheque number detail from user but
if he selects cash then we don't need to get any details.
So in this case we can make the controls for inputting bank name and cheque number to appear and disappear at run time by placing them in DIV tag and using jQuery we can show or hide the DIV according to the dropdownlist selection as shown in demo image above.
So in this case we can make the controls for inputting bank name and cheque number to appear and disappear at run time by placing them in DIV tag and using jQuery we can show or hide the DIV according to the dropdownlist selection as shown in demo image above.
Implementation: Below is the HTML Source of the page having the
controls and jQuery script required for this demonstration.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<!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 runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function ShowHideDiv() {
//Get dropdown selected value
var SelectedValue = $('#<%=
ddlPaymentMode.ClientID %>
option:selected').val();
// check selected value.
if (SelectedValue == 0) {
alert('Please select payment mode')
}
else if
(SelectedValue == 1) {
//If cash is selected then hide the Div
$('#dvShowHide').css("display", "none");
//or you can simply use jQuery hide method
to hide the Div as below:
//$('#dvShowHide').hide();
}
else {
//If Cheque is selected then show the Div
$('#dvShowHide').css("display", "block");
//or you can simply use jQuery show method
to show the Div as below:
//$('#dvShowHide').show();
//Clear textboxes
$('#<%=txtBankName.ClientID %>').val('');
$('#<%=txtChequeNumber.ClientID %>').val('');
//Set focus in bank name textbox
$('#<%=txtBankName.ClientID %>').focus();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 270px;">
<legend>Show/Hide Div Content Demo</legend>
Payment Mode: <asp:DropDownList ID="ddlPaymentMode" runat="server" Width="150px" onchange="ShowHideDiv();">
<asp:ListItem Text="-Select-"
Value="0"
Selected="True"></asp:ListItem>
<asp:ListItem Text="Cash" Value="1"></asp:ListItem>
<asp:ListItem Text="Cheque"
Value="2"></asp:ListItem>
</asp:DropDownList>
<div
id="dvShowHide"
style="display:none;">
Bank Name :
<asp:TextBox ID="txtBankName"
runat="server"></asp:TextBox><br />
Cheque Number: <asp:TextBox ID="txtChequeNumber" runat="server"></asp:TextBox>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
" I hope you have got how to show or hide the DIV containing controls based on DropDownList selected value in asp.net using jQuery and
If you like my work; you can appreciate by leaving your comments, hitting
Facebook like button, following on Google+, Twitter, Linked in and Pinterest,
stumbling my posts on stumble upon and subscribing for receiving free updates
directly to your inbox . Stay tuned and stay connected for more technical
updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..