我们在做系统时,很多情况下都需要在页面中嵌套省市级联信息,网上找到的范例大多省市信息不够完整或是级联操作过于复杂。这一篇我也发布一个省市级联示例程序,其中数据文件是借用前人的工作成果(原作者网名为norkts,具体请参见 sitedata.js 文件头部的注释信息)。下面是页面源码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
1:
2: <script type="text/javascript" src="sitedata.js">
1: </script>
2: <script type="text/javascript">
3: $(document).ready(function () {
4: var provinceSelector = $("#provinceSelector");
5: var citySelector = $("#citySelector");
6: var areaSelector=$("#areaSelector");
7: GetProvince();
8: provinceSelector.change(function () {
9: var provinceName = provinceSelector.val();
10: if (provinceName != '') {
11: GetCity(provinceName);
12: areaSelector.empty();
13: }
14: else{
15: citySelector.empty();
16: areaSelector.empty();
17: }
18: });
19: citySelector.change(function () {
20: var provinceName = provinceSelector.val();
21: var cityName = citySelector.val();
22: if(cityName!=''){
23: GetArea(provinceName, cityName);
24: }
25: else{
26: areaSelector.empty();
27: }
28: });
29: });
30:
31: // 获取省份(直辖市)信息
32: function GetProvince() {
33: var provSelector = $("#provinceSelector");
34: provSelector.empty();
35: provSelector.append("<option value=''>--请选择--</option>");
36: var arrProvince = provinceInfo;
37: for (var provinceIndex in arrProvince) {
38: provSelector.append("<option value='" + arrProvince[provinceIndex]["name"] + "'>" + arrProvince[provinceIndex]["name"] + "</option>")
39: }
40: }
41:
42: // 获取指定省份(直辖市)的城市(辖区或县)信息
43: function GetCity(provinceName) {
44: var citySelector = $("#citySelector");
45: var arrCity;
46: for (var provinceIndex in provinceInfo) {
47: if (provinceInfo[provinceIndex]["name"] == provinceName) {
48: arrCity = provinceInfo[provinceIndex]["sub"];
49: break;
50: }
51: }
52: citySelector.empty();
53: citySelector.append("<option value=''>--请选择--</option>")
54: for (var cityIndex in arrCity) {
55: citySelector.append("<option value='" + arrCity[cityIndex]["name"] + "'>" + arrCity[cityIndex]["name"] + "</option>")
56: }
57: }
58:
59: // 获取指定城市(辖区或县)的地区信息
60: function GetArea(provinceName, cityName) {
61: var areaSelector = $("#areaSelector");
62: var arrCity, arrArea;
63: for (var provinceIndex in provinceInfo) {
64: if (provinceInfo[provinceIndex]["name"] == provinceName) {
65: arrCity = provinceInfo[provinceIndex]["sub"];
66: for (var cityIndex in arrCity) {
67: if (arrCity[cityIndex]["name"] == cityName) {
68: arrArea = arrCity[cityIndex]["sub"];
69: break;
70: }
71: }
72: }
73: }
74: areaSelector.empty();
75: areaSelector.append("<option value=''>--请选择--</option>")
76: for (var areaIndex in arrArea) {
77: areaSelector.append("<option value='" + arrArea[areaIndex]["name"] + "'>" + arrArea[areaIndex]["name"] + "</option>")
78: }
79: }
80:
</
script
>
</head>
<body>
<div>
<select id="provinceSelector"></select>
<select id="citySelector"></select>
<select id="areaSelector"></select>
</div>
</body>
</html>
其中 sitedata.js 中的数据采用了JSON格式保存,本人不才,级联操作写得不够优雅,本程序仅作示例,具体操作乡亲们请自行修改(^_^)。
附上源码如下: