jQuery to Show/Hide Div content based on Asp.net DropDownList selected value

  ASP.NET Projects

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:&nbsp;&nbsp;&nbsp;  <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 :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

 

20 thoughts on - jQuery to Show/Hide Div content based on Asp.net DropDownList selected value

LEAVE A COMMENT