<script type="text/javascript">
// note order is important, this has to go at the top
function showMessage() {
$("#pleaseWait").show();
}
function hideMessage() {
$("#pleaseWait").hide();
}
</script>
<form id="form1" runat="server">
<div id="pleaseWait">Please wait...</div>
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlParent" runat="server" AutoPostBack="true" onchange="showMessage()"
OnSelectedIndexChanged="ddlParent_SelectedIndexChanged">
<asp:ListItem runat="server">Parent A</asp:ListItem>
<asp:ListItem runat="server">Parent B</asp:ListItem>
<asp:ListItem runat="server">Parent C</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlChild" runat="server">
<asp:ListItem runat="server">Please select parent first</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</form>
code behind
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "hideMessage", "hideMessage();", true);
}
protected void ddlParent_SelectedIndexChanged(object sender, EventArgs e)
{
ddlChild.Items.Clear();
ddlChild.Items.Add(ddlParent.SelectedValue + " 1");
ddlChild.Items.Add(ddlParent.SelectedValue + " 2");
ddlChild.Items.Add(ddlParent.SelectedValue + " 3");
System.Threading.Thread.Sleep(3000);
}