Ajax实现联动效果

这类东西很多人都写过，但我是第一次写，支持一下菜鸟的原创吧～
第一级是写死的（因为省不会变的），以下三级都是现查的数据库，由于没有采用DIV格式，所以有些ID很长~
js代码：

function ProvinceChange(obj1,obj2,obj3)
2

{
3

if(typeof(ActiveXObject) != "undefined")
4

{
5

if(obj1.value=="")
6

{
7

obj2.length=0;
8

obj3.length=0;
9

form1.Wizard1_SchoolAddForm1_District.length=0;
10

}
11

else
12

{
13

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
14

var item = obj1.options[obj1.selectedIndex].value;
15

var ReqStr = '<?xml version="1.0"?>';
16

xmlHttp.open("GET","SettleForm.aspx?province="+item);
17

xmlHttp.send(ReqStr);
18

xmlHttp.onreadystatechange = HandleResult;
19

}
20

}
21

function HandleResult()
22

{
23

if(4 == xmlHttp.readyState || "complete" == xmlHttp.readyState)
24

{
25

obj2.length=0;
26

obj3.length=0;
27

form1.Wizard1_SchoolAddForm1_District.length=0;
28

obj2.options[obj2.length]=new Option("");
29

obj3.options[obj3.length]=new Option("");
30

var e=xmlHttp.responseText;
31

alert(e);
32

if(e!="未添加")
33

{
34

var a=e.split("*");
35

var arr1=a[0].toString().split(",");
36

var arr2=a[1].toString().split(",");
37

for(var i=0;i<arr1.length;i++)
38

{
39

obj2.options[obj2.length]=new Option(arr1[i]);
40

}
41

for(var j=0;j<arr2.length;j++)
42

{
43

obj3.options[obj3.length]=new Option(arr2[j]);
44

}
45

}
46

}
47

}
48

}
49

function CityChange(obj1,obj2,obj3)
51

{
52

if(typeof(ActiveXObject) != "undefined")
53

{
54

if(obj1.selectedIndex==0)
55

{
56

obj2.length=0;
57

obj3.length=0;
58

}
59

else
60

{
61

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
62

var ReqStr = '<?xml version="1.0"?>';
63

var item = obj1.options[obj1.selectedIndex].text;
64

xmlHttp.open("GET","SettleForm.aspx?city="+item);
65

xmlHttp.send(ReqStr);
66

xmlHttp.onreadystatechange = HandleResult;
67

}
68

}
69

function HandleResult()
70

{
71

if(4 == xmlHttp.readyState || "complete" == xmlHttp.readyState)
72

{
73

obj2.length=0;
74

obj2.options[obj2.length]=new Option("");
75

obj3.length=0;
76

obj3.options[obj3.length]=new Option("");
77

var e=xmlHttp.responseText;
78

if(e!="未添加")
79

{
80

var a=e.split("*");
81

var arr1=a[0].toString().split(",");
82

var arr2=a[1].toString().split(",");
83

for(var i=0;i<arr1.length;i++)
84

{
85

obj2.options[obj2.length]=new Option(arr1[i]);
86

}
87

for(var j=0;j<arr2.length;j++)
88

{
89

obj3.options[obj3.length]=new Option(arr2[j]);
90

}
91

}
92

}
93

}
94

}
96

function DistrictChange(obj1,obj2)
98

{
99

if(typeof(ActiveXObject) != "undefined")
100

{
101

if(obj1.selectedIndex==0)
102

{
103

obj2.length=0;
104

}
105

else
106

{
107

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
108

var item = obj1.options[obj1.selectedIndex].text;
109

var ReqStr = '<?xml version="1.0"?>';
110

xmlHttp.open("GET","SettleForm.aspx?district="+item);
111

xmlHttp.send(ReqStr);
112

xmlHttp.onreadystatechange = HandleResult;
113

}
114

}
115

function HandleResult()
116

{
117

if(4 == xmlHttp.readyState || "complete" == xmlHttp.readyState)
118

{
119

obj2.length=0;
120

obj2.options[obj2.length]=new Option("");
121

if(e!="未添加")
122

{
123

var e=xmlHttp.responseText;
124

var arr=e.split(",")
125

for(var i=0;i<arr.length;i++)
126

{
127

obj2.options[obj2.length]=new Option(arr[i]);
128

}
129

}
130

}
131

}
132

}
133

HTML:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SchoolAddForm.ascx.cs" Inherits="Contrls_SchoolAddForm" %>

</script>

<tr>

     学校管理</td>

</td>

</tr>

<tr>

<asp:Label ID="ProvinceLabel" runat="server" AssociatedControlID="Province">所在省(直辖市，自治区):</asp:Label></td>

</td>

<asp:DropDownList runat="server" id="Province" onchange="ProvinceChange(form1.Wizard1_SchoolAddForm1_Province,form1.Wizard1_SchoolAddForm1_City,form1.Wizard1_SchoolAddForm1_School)" Height="22px" Width="155px">

<asp:ListItem></asp:ListItem>

<asp:ListItem value="AH">安徽</asp:ListItem>

<asp:ListItem value="BJ">北京</asp:ListItem>

<asp:ListItem value="CQ">重庆</asp:ListItem>

<asp:ListItem value="FJ">福建</asp:ListItem>

<asp:ListItem value="GD">广东</asp:ListItem>

<asp:ListItem value="GS">甘肃</asp:ListItem>

<asp:ListItem value="GX">广西</asp:ListItem>

<asp:ListItem value="GZ">贵州</asp:ListItem>

<asp:ListItem value="HB">河北</asp:ListItem>

<asp:ListItem value="HLJ">黑龙江</asp:ListItem>

<asp:ListItem value="HN">河南</asp:ListItem>

<asp:ListItem value="HN">海南</asp:ListItem>

<asp:ListItem value="HB">湖北</asp:ListItem>

<asp:ListItem value="HN">湖南</asp:ListItem>

<asp:ListItem value="JL">吉林</asp:ListItem>

<asp:ListItem value="JS">江苏</asp:ListItem>

<asp:ListItem value="JX">江西</asp:ListItem>

<asp:ListItem value="LN">辽宁</asp:ListItem>

<asp:ListItem value="NMG">内蒙古</asp:ListItem>

<asp:ListItem value="NX">宁夏</asp:ListItem>

<asp:ListItem value="QH">青海</asp:ListItem>

<asp:ListItem value="SC">四川</asp:ListItem>

<asp:ListItem value="SD">山东</asp:ListItem>

<asp:ListItem value="SH">上海</asp:ListItem>

<asp:ListItem value="SNX">陕西</asp:ListItem>

<asp:ListItem value="SX">山西</asp:ListItem>

<asp:ListItem value="TJ">天津</asp:ListItem>

<asp:ListItem value="XJ">新疆</asp:ListItem>

<asp:ListItem value="XZ">西藏</asp:ListItem>

<asp:ListItem value="YN">云南</asp:ListItem>

<asp:ListItem value="ZZ">浙江</asp:ListItem>

</asp:DropDownList>

<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="Province"

ErrorMessage="必须选择所在省。" ToolTip="必须选择所在省。" ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>

</td>

</td>

</tr>

<tr>

<asp:Label ID="CityLabel" runat="server" AssociatedControlID="City">所在城市和地区:</asp:Label>

</td>

</td>

二嘎的学习笔记

Ajax实现联动效果