Cascading Dropdownlist Using UpdatePanel:.aspx code:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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="jquery-1.7.2.js" type="text/javascript"></script>
<script src="JScript.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList2_SelectedIndexChanged">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList3_SelectedIndexChanged">
</asp:DropDownList><br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
.cs file:using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class Default2 : System.Web.UI.Page
{
public SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ArtSQLConnStr"]);
DataSet dataSet1 = new DataSet();
SqlDataAdapter da = null;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
da = new SqlDataAdapter("select * from student_test", conn);
da.Fill(dataSet1);
DropDownList1.DataSource = dataSet1;
DropDownList1.DataTextField = "Test_toppic";
DropDownList1.DataValueField = "Testid";
DropDownList1.DataBind();
DropDownList1.Items.Insert(0, new ListItem("Please select", "0"));
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
da = new SqlDataAdapter("select * from student_test", conn);
da.Fill(dataSet1);
DropDownList2.DataSource = dataSet1;
DropDownList2.DataTextField = "Test_toppic";
DropDownList2.DataValueField = "Testid";
DropDownList2.DataBind();
DropDownList2.Items.Insert(0, new ListItem("Please select", "0"));
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "Message", "<script>EnableDisableDropdownlist()</script>", false);
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
da = new SqlDataAdapter("select * from student_test", conn);
da.Fill(dataSet1);
DropDownList3.DataSource = dataSet1;
DropDownList3.DataTextField = "Test_toppic";
DropDownList3.DataValueField = "Testid";
DropDownList3.DataBind();
DropDownList3.Items.Insert(0, new ListItem("Please select", "0"));
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "Message", "<script>EnableDisableDropdownlist()</script>", false);
}
protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "Message", "<script>alert('3rd dropdownlist')</script>", false);
}
}
JQuery code:$(document).ready(function () {
EnableDisableDropdownlist();
})
function EnableDisableDropdownlist()
{
if ($("[ID$='DropDownList1']").val() == "0")
{
$("[ID$='DropDownList2']").attr("disabled", true);
$("[ID$='DropDownList3']").attr("disabled", true);
}
else if ($("[ID$='DropDownList2']").val() == "0")
{
$("[ID$='DropDownList3']").attr("disabled", true);
}
}