使用 AjaxPro 来完成二级联动的效果

首先要在Web.config的<system.web>中添加下面的东东

< httpHandlers >
    < add verb = " POST,GET "  path = " AjaxPro/*.ashx "  type = " AjaxPro.AjaxHandlerFactory, AjaxPro "   />
   </ httpHandlers >

然后在服务器端的Page_Load中添加下面一行代码

AjaxPro.Utility.RegisterTypeForAjax( typeof (index));

BigClassid 前台页面

＜script type="text/javascript"＞ 
function ShowCity(id) 
{ 
var result = chen.getCityList(id).value; 
var ddlcity = document.getElementById("ddlCity"); 
ddlcity.length=0; 
for(var i=0; i＜result.Rows.length; i++) 
{ 
ddlcity.options.add(new Option(result.Rows[i].SmallClass,result.Rows[i].id)); 
} 
} 
＜/script＞ 
＜/head＞ 
＜body＞ 
＜form id="form1" runat="server"＞ 
＜p＞ 
省份：＜asp:DropDownList ID="ddlPro" runat="server"＞ 
＜/asp:DropDownList＞ 
市区：＜asp:DropDownList ID="ddlCity" runat="server"＞ 
＜/asp:DropDownList＞ 
＜/p＞ 
＜div＞ 

＜/div＞ 
＜/form＞ 
＜/body＞ 
＜script type="text/javascript"＞
function ShowCity(id)
{
var result = chen.getCityList(id).value; 
var ddlcity = document.getElementById("ddlCity"); 
ddlcity.length=0; 
for(var i=0; i＜result.Rows.length; i++)
{
ddlcity.options.add(new Option(result.Rows[i].SmallClass,result.Rows[i].id)); 
}
}
＜/script＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜p＞
省份：＜asp:DropDownList ID="ddlPro" runat="server"＞
＜/asp:DropDownList＞
市区：＜asp:DropDownList ID="ddlCity" runat="server"＞
＜/asp:DropDownList＞
＜/p＞
＜div＞

＜/div＞
＜/form＞
＜/body＞

后台：

[AjaxPro.AjaxNamespace("chen")] 
public partial class ddlTwo : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
AjaxPro.Utility.RegisterTypeForAjax(typeof(ddlTwo)); 

SqlConnection conn = new SqlConnection("server=.; uid=sa; pwd=chen123; database=C_News; "); 
conn.Open(); 
SqlCommand cmd = new SqlCommand("", conn); 
string strsql = "select * from C_BigClass"; 
cmd.CommandText = strsql; 
SqlDataAdapter da = new SqlDataAdapter(); 
da.SelectCommand = cmd; 
DataTable dt = new DataTable(); 
da.Fill(dt); 

this.ddlPro.DataSource = dt; 
this.ddlPro.DataValueField = "id"; 
this.ddlPro.DataTextField = "BigClass"; 
this.ddlPro.DataBind(); 

this.ddlPro.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)"; 

conn.Close(); 
} 

[AjaxPro.AjaxMethod] 
public DataTable getCityList(int id) 
{ 
Hashtable ht = new Hashtable(); 

SqlConnection conn = new SqlConnection("server=.; uid=sa; pwd=chen123; database=C_News; "); 
conn.Open(); 
SqlCommand cmd = new SqlCommand("", conn); 
string strsql = "select * from C_SmallClass where BigClassid="+id+""; 
cmd.CommandText = strsql; 
SqlDataAdapter da = new SqlDataAdapter(); 
da.SelectCommand = cmd; 
DataTable dt = new DataTable(); 
da.Fill(dt); 

return dt; 
} 
} 

　　如果我们要进行三级或四级连动，其实很简单，只要在Page_load下面this.ddlPro.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)"; 的下面为每个下拉框都加一个方法就行了。只不过多写几个public DataTable getCityList(int id)的程序。