Please disable your adblock and script blockers to view this page
 

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

Show or hide div containing control based on dropdownlist selected value in asp.netIntroduction: 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.
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.

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

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."
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon