现在在实现二级连动或是三级连动方面，都是采用ajax来完成的。网上的例子也很多。 我采用的是AjaxPro来完的。 如何配置AjaxPro我就不说了。
BigClassid 前台页面 ddlTwo.aspx
| ＜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＞ |
后台：ddlTwo.aspx.cs
| [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)的程序。
