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的(自己能力所致，试过没实现)等，请不吝赐教，谢谢！
