像平时购物选择地址时一样，通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，从而可以实现省市县的三级联动，下面使用原生的JavaScript来实现这个功能：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title>三级联动测试</title>
<script src=
"jquery-2.1.4.min.js"
></script>
<script type=
"text/javascript"
>
//用来获得option元素中selected属性为true的元素的id
function
Get_Selected_Id(place){
var
pro = document.getElementById(place);
var
Selected_Id = pro.options[pro.selectedIndex].id;
return
Selected_Id;
//返回selected属性为true的元素的id
}
//改变下一个级联的option元素的内容，即加载市或县
function
Get_Next_Place(This_Place_ID,Action){
var
Selected_Id = Get_Selected_Id(This_Place_ID);
//Selected_Id用来记录当前被选中的省或市的ID
if
(Action==
'Get_city'
)
//从而可以在下一个级联中加载相应的市或县
Add_city(Selected_Id);
else
if
(Action==
'Get_country'
)
Add_country(Selected_Id);
}
//用来存储省市区的数据结构
var
Place_dict = {
"GuangDong"
:{
"GuangZhou"
:[
"PanYu"
,
"HuangPu"
,
"TianHe"
],
"QingYuan"
:[
"QingCheng"
,
"YingDe"
,
"LianShan"
],
"FoShan"
:[
"NanHai"
,
"ShunDe"
,
"SanShui"
]
},
"ShanDong"
:{
"JiNan"
:[
"LiXia"
,
"ShiZhong"
,
"TianQiao"
],
"QingDao"
:[
"ShiNan"
,
"HuangDao"
,
"JiaoZhou"
]
},
"HuNan"
:{
"ChangSha"
:[
"KaiFu"
,
"YuHua"
,
"WangCheng"
],
"ChenZhou"
:[
"BeiHu"
,
"SuXian"
,
"YongXian"
]
}
};
//加载城市选项
function
Add_city(Province_Selected_Id){
$(
"#city"
).empty();
$(
"#city"
).append(
"<option>City</option>"
);
$(
"#country"
).empty();
$(
"#country"
).append(
"<option>Country</option>"
);
//上面的两次清空与两次添加是为了保持级联的一致性
var
province_dict = Place_dict[Province_Selected_Id];
//获得一个省的字典
for
(city
in
province_dict){
//取得省的字典中的城市
//添加内容的同时在option标签中添加对应的城市ID
var
text =
"<option"
+
" id='"
+city+
"'>"
+city+
"</option>"
;
$(
"#city"
).append(text);
console.log(text);
//用来观察生成的text数据
}
}
//加载县区选项
function
Add_country(City_Selected_Id){
$(
"#country"
).empty();
$(
"#country"
).append(
"<option>Country</option>"
);
//上面的清空与添加是为了保持级联的一致性
var
Province_Selected_ID = Get_Selected_Id(
"province"
);
//获得被选中省的ID，从而方便在字典中加载数据
var
country_list = Place_dict[Province_Selected_ID][City_Selected_Id];
//获得城市列表
for
(index
in
country_list){
////添加内容的同时在option标签中添加对应的县区ID
var
text =
"<option"
+
" id=\'"
+country_list[index]+
"\'>"
+country_list[index]+
"</option>"
;
$(
"#country"
).append(text);
console.log(text);
//用来观察生成的text数据
}
}
</script>
</head>
<body>
<p>您的收货地址：</p>
<select id=
"province"
onchange=
"Get_Next_Place('province','Get_city')"
>
<option id=
"Not_data1"
>Province</option>
<option id=
"GuangDong"
value=
"GuangDong"
>GuangDong</option>
<option id=
"ShanDong"
value=
"ShanDong"
>ShanDong</option>
<option id=
"HuNan"
value=
"HuNan"
>HuNan</option>
</select>
<select id=
"city"
onchange=
"Get_Next_Place('city','Get_country')"
>
<option id=
"Not_data2"
>City</option>
</select>
<select id=
"country"
>
<option id=
"Not_data3"
>Country</option>
</select>
<br/>
</body>
</html>
|
测试结果如下：
未做任何选择时：
选择时：
当然，省市县三者都是动态联动的，只要顶级的内容发生改变，所有子级的内容也会发生改变或被重置为City或Country.
本文转自 xpleaf 51CTO博客，原文链接：http://blog.51cto.com/xpleaf/1716190，如需转载请自行联系原作者
