<!DOCTYPE html>
<head>
<title>省市区三级联动[JSON+Jquery]</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="json/CityJson.js" type="text/javascript"></script>
<script src="json/ProJson.js" type="text/javascript"></script>
<script src="json/DistrictJson.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.each(province, function (k, p) {
var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
$("#selProvince").append(option);
});
$("#selProvince").change(function () {
var selValue = $(this).val();
$("#selCity option:gt(0)").remove();
$.each(city, function (k, p) {
if (p.ProID == selValue) {
var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove();
$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
$("#selDistrict").append(option);
}
});
});
});
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>
</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
<input type="button" id="btnOK" value="确定" />
</body>
</html>
---------------------------------------------------------------------------
省：ProJson.js
province = [{ "ProID": 1, "ProName": "北京市", "ProSort": 1, "ProRemark": "直辖市" }, { "ProID": 2, "ProName": "天津市", "ProSort": 2, "ProRemark": "直辖市" }, { "ProID": 3, "ProName": "河北省", "ProSort": 5, "ProRemark": "省份" }, { "ProID": 4, "ProName": "山西省", "ProSort": 6, "ProRemark": "省份" }, { "ProID": 5, "ProName": "内蒙古自治区", "ProSort": 32, "ProRemark": "自治区" }, { "ProID": 6, "ProName": "辽宁省", "ProSort": 8, "ProRemark": "省份" }, { "ProID": 7, "ProName": "吉林省", "ProSort": 9, "ProRemark": "省份" }, { "ProID": 8, "ProName": "黑龙江省", "ProSort": 10, "ProRemark": "省份" }, { "ProID": 9, "ProName": "上海市", "ProSort": 3, "ProRemark": "直辖市" }, { "ProID": 10, "ProName": "江苏省", "ProSort": 11, "ProRemark": "省份" }, { "ProID": 11, "ProName": "浙江省", "ProSort": 12, "ProRemark": "省份" }, { "ProID": 12, "ProName": "安徽省", "ProSort": 13, "ProRemark": "省份" }, { "ProID": 13, "ProName": "福建省", "ProSort": 14, "ProRemark": "省份" }, { "ProID": 14, "ProName": "江西省", "ProSort": 15, "ProRemark": "省份" }, { "ProID": 15, "ProName": "山东省", "ProSort": 16, "ProRemark": "省份" }, { "ProID": 16, "ProName": "河南省", "ProSort": 17, "ProRemark": "省份" }, { "ProID": 17, "ProName": "湖北省", "ProSort": 18, "ProRemark": "省份" }, { "ProID": 18, "ProName": "湖南省", "ProSort": 19, "ProRemark": "省份" }, { "ProID": 19, "ProName": "广东省", "ProSort": 20, "ProRemark": "省份" }, { "ProID": 20, "ProName": "海南省", "ProSort": 24, "ProRemark": "省份" }, { "ProID": 21, "ProName": "广西壮族自治区", "ProSort": 28, "ProRemark": "自治区" }, { "ProID": 22, "ProName": "甘肃省", "ProSort": 21, "ProRemark": "省份" }, { "ProID": 23, "ProName": "陕西省", "ProSort": 27, "ProRemark": "省份" }, { "ProID": 24, "ProName": "新 疆维吾尔自治区", "ProSort": 31, "ProRemark": "自治区" }, { "ProID": 25, "ProName": "青海省", "ProSort": 26, "ProRemark": "省份" }, { "ProID": 26, "ProName": "宁夏回族自治区", "ProSort": 30, "ProRemark": "自治区" }, { "ProID": 27, "ProName": "重庆市", "ProSort": 4, "ProRemark": "直辖市" }, { "ProID": 28, "ProName": "四川省", "ProSort": 22, "ProRemark": "省份" }, { "ProID": 29, "ProName": "贵州省", "ProSort": 23, "ProRemark": "省份" }, { "ProID": 30, "ProName": "云南省", "ProSort": 25, "ProRemark": "省份" }, { "ProID": 31, "ProName": "西藏自治区", "ProSort": 29, "ProRemark": "自治区" }, { "ProID": 32, "ProName": "台湾省", "ProSort": 7, "ProRemark": "省份" }, { "ProID": 33, "ProName": "澳门特别行政区", "ProSort": 33, "ProRemark": "特别行政区" }, { "ProID": 34, "ProName": "香港特别行政区", "ProSort": 34, "ProRemark": "特别行政区"}];
---------------------------------------------------------------------------
市：CityJson.js
city = [{ "CityID": 1, "CityName": "北京市", "ProID": 1, "CitySort": 1 }, { "CityID": 2, "CityName": "天津市", "ProID": 2, "CitySort": 2 }, { "CityID": 3, "CityName": "上海市", "ProID": 9, "CitySort": 3 }, { "CityID": 4, "CityName": "重庆市", "ProID": 27, "CitySort": 4 }, { "CityID": 5, "CityName": "邯郸市", "ProID": 3, "CitySort": 5 }, { "CityID": 6, "CityName": "石家庄市", "ProID": 3, "CitySort": 6 }, { "CityID": 7, "CityName": "保定市", "ProID": 3, "CitySort": 7 }, { "CityID": 8, "CityName": "张家口市", "ProID": 3, "CitySort": 8 }, { "CityID": 9, "CityName": "承德市", "ProID": 3, "CitySort": 9 }, { "CityID": 10, "CityName": "唐山市", "ProID": 3, "CitySort": 10 }, { "CityID": 11, "CityName": "廊坊市", "ProID": 3, "CitySort": 11 }, { "CityID": 12, "CityName": "沧州市", "ProID": 3, "CitySort": 12 }, { "CityID": 13, "CityName": "衡水市", "ProID": 3, "CitySort": 13 }, { "CityID": 14, "CityName": "邢台市", "ProID": 3, "CitySort": 14 },
。。。。。。。 { "CityID": 370, "CityName": "澳门特别行政区", "ProID": 33, "CitySort": 370 }, { "CityID": 371, "CityName": "香港特别行政区", "ProID": 34, "CitySort": 371}];
---------------------------------------------------------------------------
区、县：DistrictJson.js
District=[{"Id":1,"DisName":"东城区","CityID":1,"DisSort":null},{"Id":2,"DisName":"西城区","CityID":1,"DisSort":null},{"Id":3,"DisName":"崇文区","CityID":1,"DisSort":null},{"Id":4,"DisName":"宣武区","CityID":1,"DisSort":null},{"Id":5,"DisName":"朝阳区","CityID":1,"DisSort":null},{"Id":6,"DisName":"丰台区","CityID":1,"DisSort":null},{"Id":7,"DisName":"石景山区","CityID":1,"DisSort":null},{"Id":8,"DisName":"海淀区","CityID":1,"DisSort":null},{"Id":9,"DisName":"门头沟区","CityID":1,"DisSort":null},{"Id":10,"DisName":"房山区","CityID":1,"DisSort":null},{"Id":11,"DisName":"通州区","CityID":1,"DisSort":null},{"Id":12,"DisName":"顺义区","CityID":1,"DisSort":null},{"Id":13,"DisName":"昌平区","CityID":1,"DisSort":null},{"Id":14,"DisName":"大兴区","CityID":1,"DisSort":null},{"Id":15,"DisName":"怀柔区","CityID":1,"DisSort":null},{"Id":16,"DisName":"平谷区","CityID":1,"DisSort":null},{"Id":17,"DisName":"密云县","CityID":1,"DisSort":null},{"Id":18,"DisName":"延庆县","CityID":1,"DisSort":null},{"Id":19,"DisName":"和平区","CityID":2,"DisSort":null},{"Id":20,"DisName":"河东区","CityID":2,"DisSort":null},{"Id":21,"DisName":"河西区","CityID":2,"DisSort":null},{"Id":22,"DisName":"南开区","CityID":2,"DisSort":null},{"Id":23,"DisName":"河北区","CityID":2,"DisSort":null},。。。。。{"Id":2821,"DisName":"突泉县","CityID":361,"DisSort":null},{"Id":2822,"DisName":"阿拉善左旗","CityID":362,"DisSort":null},{"Id":2823,"DisName":"阿拉善右旗","CityID":362,"DisSort":null},{"Id":2824,"DisName":"额济纳旗","CityID":362,"DisSort":null}];