我们在做系统时，很多情况下都需要在页面中嵌套省市级联信息，网上找到的范例大多省市信息不够完整或是级联操作过于复杂。这一篇我也发布一个省市级联示例程序，其中数据文件是借用前人的工作成果(原作者网名为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格式保存，本人不才，级联操作写得不够优雅，本程序仅作示例，具体操作乡亲们请自行修改(^_^)。
附上源码如下：
