Cascade dropdown list using Update Panel

1. All dropdown list must be in same update panel
2. Autopostback = "true" must be set to parent dropdown.
3.. Viewstate must be ENABLE, otherwise, SelectedIndexChanged of dropdownlist cannot be triggered.


 Tip to disable selection on second and thrid lists while first list item change
For some controls, ASP.NET already uses client-side event handling to perform automatic postback operations. The preferred way to add client-side evnet handling code for Web server controls is via the use of the Attributes property of the Web server controls. You can do that in Page_Load event where IsPostBack=False.
  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ddlOne.Attributes.Add("Onchange", "ddlOne_Onchange();");
        }
    }

Code

<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="true" CodeFile="sample.ascx.cs"
    Inherits="sample" %>
   
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<script language="javascript" type="text/javascript">   
function ddlOne_Onchange()    
    {
        $("#<%= ddlTwo.ClientID %>").attr("disabled", "disabled");
        $("#<%= ddlTwo.ClientID %>").removeAttr("selected");
        $("#<%= ddlTwo.ClientID %>").prepend('<option selected="selected" value="-1">Loading...</option>');

        $("#<%= ddlThree.ClientID %>").attr("disabled", "disabled");.
        $("#<%= ddlThree.ClientID %>").removeAttr("selected");
        $("#<%= ddlThree.ClientID %>").prepend('<option selected="selected" value="-1">Loading...</option>');
    }
 </script>
<!-- Search Box -->
<div id="SearchControlDropDowns">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="ddWrapper">
                <span class="ddTitle">Browse Holidays</span>
                <div id="ddDiv1">
                    <label class="ddLabel">
                        Select Holiday Type</label>
                    <asp:DropDownList ID="ddlOne" runat="server" AutoPostBack="true" CssClass="SearchDropDown"
                        DataTextField="DisplayText" DataValueField="Id" OnSelectedIndexChanged="ddlOne_SelectedIndexChanged" />
                </div>
                <div id="ddDiv2">
                    <label class="ddLabel">
                        Country</label>
                    <asp:DropDownList ID="ddlTwo" runat="server" AutoPostBack="true" CssClass="SearchDropDown"
                        DataTextField="DisplayText" DataValueField="Id" OnSelectedIndexChanged="ddlTwo_SelectedIndexChanged" />
                </div>
                <div id="ddDiv3">
                    <label class="ddLabel">
                        Region</label>
                    <asp:DropDownList ID="ddlThree" runat="server" CssClass="SearchDropDown"
                        DataTextField="DisplayText" DataValueField="Id"/>
                </div>
                <div id="ddDiv4">
                    <asp:ImageButton ID="btnSearch" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/buttonFind.gif"
                        OnClientClick=" search(); return false;" CssClass="SearchDropDownButton" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>   
</div>