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

现在在实现二级连动或是三级连动方面，都是采用ajax来完成的。网上的例子也很多。 我采用的是AjaxPro来完的。 如何配置AjaxPro我就不说了。
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)的程序。

转载于:https://blog.51cto.com/opper/122611