AJAX级联多个下拉

最近的项目有比较多的关联分类，一开始想偷懒所以选择了Discuz中的级联下拉框，效果如图:

,

后来觉得自己做起来是简单了，但用户体验不是太理想，所以最后还是改成分成多个下拉框关联选择，当然最好是无刷新。

第一种方式：我选择了Asp.Net AJAX ToolKit中的CascadingDropDown控件

XHTML代码

1 < asp:ScriptManager ID ="ScriptManager1" runat ="server" > </ asp:ScriptManager >
2   < div >
3 < asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >
4 < ContentTemplate >
5 < asp:DropDownList ID ="ddlProvince" runat ="server" >
6 </ asp:DropDownList >< asp:DropDownList ID ="ddlCity" runat ="server" >
7 </ asp:DropDownList >< asp:DropDownList ID ="ddlVilliage" runat ="server" >
8 </ asp:DropDownList >< ajax:CascadingDropDown ID ="CascadingDropDown2" runat ="server" TargetControlID ="ddlProvince" ServicePath ="SNWebService.asmx" ServiceMethod ="GetProvinceContents" Category ="Province" PromptText ="请选择省份" LoadingText ="省份加载中..." >
9 </ ajax:CascadingDropDown >
10 < ajax:CascadingDropDown ID ="CascadingDropDown1" runat ="server" ParentControlID ="ddlProvince" ServicePath ="SNWebService.asmx" ServiceMethod ="GetCityContents" Category ="City" TargetControlID ="ddlCity" PromptText ="请选择城市" LoadingText ="城市加载中..." >
11 </ ajax:CascadingDropDown >
12 < ajax:CascadingDropDown ID ="CascadingDropDown3" runat ="server" Category ="Villiage" LoadingText ="区县加载中..."
13 ParentControlID ="ddlCity" PromptText ="请选择区县" ServiceMethod ="GetViliageContents"
14 ServicePath ="SNWebService.asmx" TargetControlID ="ddlVilliage" >
15 </ ajax:CascadingDropDown >
16 </ ContentTemplate >
17 </ asp:UpdatePanel >
18   </ div >

WebService代码

1 /// <summary>
2 /// 获取省份数据
3 /// </summary>
4 /// <param name="knownCategoryValues"></param>
5 /// <param name="category"></param>
6 /// <returns></returns>
7   [WebMethod]
8 public CascadingDropDownNameValue[] GetProvinceContents( string knownCategoryValues, string category)
9 {
10 List < CascadingDropDownNameValue > provinceList = new List < CascadingDropDownNameValue > ();
11
12
13 string strSql = " Select * From Province " ;
14
15 SqlCommand sqlCmd = new SqlCommand(strSql, sqlConn);
16
17 SqlDataReader dtrProvince = sqlCmd.ExecuteReader();
18
19 while (dtrProvince.Read())
20 {
21 provinceList.Add( new CascadingDropDownNameValue(dtrProvince[ " Name " ].ToString(),dtrProvince[ " Code " ].ToString()));
22 }
23
24 dtrProvince.Close();
25
26
27 return provinceList.ToArray();
28 }
29 /// <summary>
30 /// 获取市数据
31 /// </summary>
32 /// <param name="knownCategoryValues"></param>
33 /// <param name="category"></param>
34 /// <returns></returns>
35   [WebMethod]
36 public CascadingDropDownNameValue[] GetCityContents( string knownCategoryValues, string category)
37 {
38 StringDictionary provinceList = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
39
40 string strSql = " Select * From city Where ProvinceId=' " + provinceList[ " Province " ] + " ' " ;
41
42 SqlCommand sqlCmd = new SqlCommand(strSql, sqlConn);
43
44 SqlDataReader dtrCity = sqlCmd.ExecuteReader();
45
46 List < CascadingDropDownNameValue > cityList = new List < CascadingDropDownNameValue > ();
47
48 while (dtrCity.Read())
49 {
50 cityList.Add( new CascadingDropDownNameValue(dtrCity[ " Name " ].ToString(), dtrCity[ " code " ].ToString()));
51 }
52
53 dtrCity.Close();
54
55 return cityList.ToArray();
56 }
57 /// <summary>
58 /// 获取乡镇数据
59 /// </summary>
60 /// <param name="knownCategoryValues"></param>
61 /// <param name="category"></param>
62 /// <returns></returns>
63   [WebMethod]
64 public CascadingDropDownNameValue[] GetViliageContents( string knownCategoryValues, string category)
65 {
66 StringDictionary cityList = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
67
68
69 string strSql = " Select * From area Where CityId=' " + cityList[ " City " ] + " ' " ;
70
71 SqlCommand sqlCmd = new SqlCommand(strSql, sqlConn);
72
73 SqlDataReader dtrViliage = sqlCmd.ExecuteReader();
74
75 List < CascadingDropDownNameValue > viliageList = new List < CascadingDropDownNameValue > ();
76
77 while (dtrViliage.Read())
78 {
79 viliageList.Add( new CascadingDropDownNameValue(dtrViliage[ " Name " ].ToString(), dtrViliage[ " id " ].ToString()));
80 }
81
82 dtrViliage.Close();
83
84 return viliageList.ToArray();
85 }

因为只是做个Demo，所以上面的代码随手很乱的写在一起，具体可以自己再封装和优化。

第二种方式:AJAX

JS代码

1 function changetype(ptype) {
2 document.getElementById( " <%= ddlProduct.ClientID%> " ).length = 0 ;
3 $.getJSON( " Handler1.ashx?type= " + ptype, { " resultType " : " json " }, function (data) {
4 if (data != null ) {
5 var data = data.data;
6 for ( var i = 0 ; i < data.length; i ++ ) {
7 document.getElementById( " <%= ddlProduct.ClientID%> " ).options.add( new Option(data[i].TypeName, data[i].ID));
8 }
9 changetypelevel(document.getElementById( " <%= ddlProduct.ClientID%> " ).value);
10 }
11
12 });
13
14 }
15 function changetypelevel(ptypelv) {
16 document.getElementById( " <%= ddlProductLevel.ClientID%> " ).length = 0 ;
17 $.getJSON( " Handler1.ashx?typelv= " + ptypelv, { " resultType " : " json " }, function (data) {
18 if (data != null ) {
19 var data = data.data;
20 for ( var i = 0 ; i < data.length; i ++ ) {
21 document.getElementById( " <%= ddlProductLevel.ClientID%> " ).options.add( new Option(data[i].TypeName, data[i].ID));
22 }
23 }
24 });
25 }

处理程序代码

1 public void ProcessRequest(HttpContext context)
2 {
3 string ptype = context.Request.Params[ " type " ];
4 string ptypelv = context.Request.Params[ " typelv " ];
5 string result,result1;
6
7 if ( ! string .IsNullOrEmpty(ptype))
8 {
9 result = ConversionRateDetail(ptype);
10 context.Response.Write(result);
11 }
12 if ( ! string .IsNullOrEmpty(ptypelv))
13 {
14 result1 = ConversionRateDetail1(ptypelv);
15
16 context.Response.Write(result1);
17 }
18 }
19
20 private string ConversionRateDetail( string type1)
21 {
22 var sb = new StringBuilder();
23 type.ID = int .Parse(type1);
24 var testlist = Business.Product.GetProductTypeList(type);
25 return " {\"data\": " + Newtonsoft.Json.JsonConvert.SerializeObject(testlist) + " } " ;
26 }
27 private string ConversionRateDetail1( string type2)
28 {
29 var sb = new StringBuilder();
30 type.ID = int .Parse(type2);
31 var testlist1 = Product.GetProductTypeList(type);
32 return " {\"data\": " + Newtonsoft.Json.JsonConvert.SerializeObject(testlist1) + " } " ;
33 }

如果有更好的方式，比如JQuery AJAX的(自己能力所致，试过没实现)等，请不吝赐教，谢谢！

转载于:https://www.cnblogs.com/pfs1314/archive/2011/03/04/1970947.html