在网上也看到许多DropDownList无刷新三级联动例子，总感觉不是那么爽哈，今天自己也写一个,正好最近都在用Anthem
就用Anthem写了个,现在把代码贴出来;
在网上也看到许多DropDownList无刷新三级联动例子，总感觉不是那么爽哈，今天自己也写一个,正好最近都在用Anthem
就用Anthem写了个,现在把代码贴出来;
Code
1
<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="dr.aspx.cs" Inherits="dr" %>
2
3<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head runat="server">
7 <title>无标题页</title>
8
9 <script language="javascript" type="text/javascript">
10 function loadCity(controlID)
11 
{
12
var oper;
13 var parentCode; //alert(oper.options[oper.selectedIndex].value);
14 //controlID根据触发事件的源是ddl_Province 还是ddl_City
15 if(controlID.id=="ddl_Province")
16
{
17 oper=document.getElementById("ddl_Province");
18 parentCode=oper.options[oper.selectedIndex].value;
19 //Anthem_InvokePageMethod方法注册getLowderDistrict()取数据
20 Anthem_InvokePageMethod('getLowderDistrict',[parentCode],showCityDdl);
21
}
22 else if(controlID.id=="ddl_City")
23 {
24 oper=document.getElementById("ddl_City");
25 parentCode=oper.options[oper.selectedIndex].value;
26 Anthem_InvokePageMethod('getLowderDistrict',[parentCode],showCountryDdl);
27 }
28 else oper=null;
29
}
30 //显示从服务器端取回的city
31 function showCityDdl(result)
32 {
33 if(result==null||result=='undefined')
34 return null;
35 // alert( document.all("ddl_City").options.length);
36 document.all("ddl_City").options.length=0;//重新加载数据清空当前的city option
37 document.all("ddl_Country").options.length=0;//重新加载数据清空当前的country option
38 var dis=result.value;
39 var count=dis.length;
40 //填充数据
41 for(var i=0;i<count;i++)
42 {
43 document.all("ddl_City").options.add(new Option(dis[i].DistrictName,dis[i].DistrictCode));
44 }
45 }
46 //显示从服务器端取回的country
47 function showCountryDdl(result)
48 {
49 if(result==null||result=='undefined')
50 return null;
51 document.all("ddl_Country").options.length=0;
52 var dis=result.value;
53 var count=dis.length; // alert(count);
54 for(var i=0;i<count;i++)
55 {
56 document.all("ddl_Country").options.add(new Option(dis[i].DistrictName,dis[i].DistrictCode));
57 }
58
59 }
60
61 </script>
62
63</head>
64<body>
65 <form id="form1" runat="server">
66 <div style="height: 50px; text-align: center">
67 <asp:DropDownList ID="ddl_Province" runat="server">
68 </asp:DropDownList>省<asp:DropDownList ID="ddl_City" runat="server">
69 </asp:DropDownList>市<asp:DropDownList ID="ddl_Country" runat="server">
70 </asp:DropDownList>县
71 </div>
72 </form>
73</body>
74</html>
75
后台代码Code
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 Anthem.Manager.Register(this);
4 if (!Page.IsPostBack)
5 {
6 District[] dis = BaseDistrictMng.GetAllProvinces();
7 this.ddl_Province.DataTextField = "DistrictName";
8 this.ddl_Province.DataValueField = "DistrictCode";
9 this.ddl_Province.DataSource = dis;
10 this.ddl_Province.DataBind();
11 this.ddl_Province.Attributes.Add("onchange", "loadCity(this)");//
12 this.ddl_City.Attributes.Add("onchange","loadCity(this)");//注册客户端事件
13 // this.ddl_City.Attributes.Add("onchange", "loadCountry(this.options[this.selectedIndex].value)");
14 }
15 }
16 [Anthem.Method]
17 public District[] getLowderDistrict(string districtCode)
18 {
19 //GetLowerDistricts()根据上级行政区域代码去下级行政区域
20 District[] dis = BaseDistrictMng.GetLowerDistricts(districtCode);
21 return dis;
22 }
页面html必须要指定EnableEventValidation="false"，属性指示是否应执行事件验证。否则将在第二次加载市的数据时报错没有启动验证的事件
就用Anthem写了个,现在把代码贴出来;
Code1
<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="dr.aspx.cs" Inherits="dr" %>2
3
<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5
<html xmlns="http://www.w3.org/1999/xhtml">6
<head runat="server">7
<title>无标题页</title>8
9
<script language="javascript" type="text/javascript">10
function loadCity(controlID)11
{ 12
var oper;13
var parentCode; //alert(oper.options[oper.selectedIndex].value); 14
//controlID根据触发事件的源是ddl_Province 还是ddl_City15
if(controlID.id=="ddl_Province")16
{17
oper=document.getElementById("ddl_Province"); 18
parentCode=oper.options[oper.selectedIndex].value; 19
//Anthem_InvokePageMethod方法注册getLowderDistrict()取数据20
Anthem_InvokePageMethod('getLowderDistrict',[parentCode],showCityDdl);21
}22
else if(controlID.id=="ddl_City")23
{24
oper=document.getElementById("ddl_City"); 25
parentCode=oper.options[oper.selectedIndex].value; 26
Anthem_InvokePageMethod('getLowderDistrict',[parentCode],showCountryDdl); 27
}28
else oper=null; 29
} 30
//显示从服务器端取回的city31
function showCityDdl(result)32
{ 33
if(result==null||result=='undefined')34
return null; 35
// alert( document.all("ddl_City").options.length);36
document.all("ddl_City").options.length=0;//重新加载数据清空当前的city option37
document.all("ddl_Country").options.length=0;//重新加载数据清空当前的country option38
var dis=result.value;39
var count=dis.length; 40
//填充数据 41
for(var i=0;i<count;i++)42
{ 43
document.all("ddl_City").options.add(new Option(dis[i].DistrictName,dis[i].DistrictCode)); 44
} 45
} 46
//显示从服务器端取回的country47
function showCountryDdl(result)48
{ 49
if(result==null||result=='undefined')50
return null;51
document.all("ddl_Country").options.length=0;52
var dis=result.value;53
var count=dis.length; // alert(count); 54
for(var i=0;i<count;i++)55
{ 56
document.all("ddl_Country").options.add(new Option(dis[i].DistrictName,dis[i].DistrictCode)); 57
}58
59
} 60
61
</script>62
63
</head>64
<body>65
<form id="form1" runat="server">66
<div style="height: 50px; text-align: center">67
<asp:DropDownList ID="ddl_Province" runat="server">68
</asp:DropDownList>省<asp:DropDownList ID="ddl_City" runat="server">69
</asp:DropDownList>市<asp:DropDownList ID="ddl_Country" runat="server">70
</asp:DropDownList>县71
</div>72
</form>73
</body>74
</html>75
后台代码
Code1
protected void Page_Load(object sender, EventArgs e)2
{3
Anthem.Manager.Register(this);4
if (!Page.IsPostBack)5
{6
District[] dis = BaseDistrictMng.GetAllProvinces(); 7
this.ddl_Province.DataTextField = "DistrictName";8
this.ddl_Province.DataValueField = "DistrictCode";9
this.ddl_Province.DataSource = dis;10
this.ddl_Province.DataBind();11
this.ddl_Province.Attributes.Add("onchange", "loadCity(this)");//12
this.ddl_City.Attributes.Add("onchange","loadCity(this)");//注册客户端事件13
// this.ddl_City.Attributes.Add("onchange", "loadCountry(this.options[this.selectedIndex].value)");14
}15
}16
[Anthem.Method]17
public District[] getLowderDistrict(string districtCode) 18
{19
//GetLowerDistricts()根据上级行政区域代码去下级行政区域20
District[] dis = BaseDistrictMng.GetLowerDistricts(districtCode); 21
return dis; 22
}