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