Complete ASPX HTML Source Codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default8.aspx.cs" Inherits="Default8" %> <!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 id="Head1" 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>
(Visited 55 times, 1 visits today)