最新升级版:https://www.cnblogs.com/xiaqiuchu/p/11519314.html
存在bug：
- 不能初始化市区，只能初始化省
- 当选择完毕市区之后，再改变省，区只能清空不可以初始化
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select name="" >
<option value="">请选择省</option>
</select>
<select name="" >
<option value="">请先选择省</option>
</select>
<select name="" >
<option value="">请先选择市</option>
</select>
<script src="area_data.js"></script>
<script>
var Province,City,District;
Province = document.getElementById("Province");
City = document.getElementById("City");
District = document.getElementById("District");
// 初始化
(function(){
var ProvinceHtml = "";
region.forEach(function(index){
ProvinceHtml += "<option value='"+index.provinceCode+"'>"+index.provinceName+"</option>";
});
Province.innerHTML = ProvinceHtml;
})()
Province.onchange = function(){
var that = this;
var CityHtml = "";
// 初始化县
District.innerHTML = "<option value=''>请先选择市</option>";
region.forEach(function(index){
if(index.provinceCode == that.value){
index.mallCityList.forEach(function(child){
CityHtml += "<option value='"+child.cityCode+"'>"+child.cityName+"</option>";
});
City.innerHTML = CityHtml;
return ;
}
});
};
City.onchange = function(){
var that = this;
var DistrictHtml = "";
region.forEach(function(index){
if(index.provinceCode == Province.value){
index.mallCityList.forEach(function(child){
if(child.cityCode == that.value){
child.mallAreaList.forEach(function(sun){
DistrictHtml += "<option value='"+sun.areaCode+"'>"+sun.areaName+"</option>";
});
District.innerHTML = DistrictHtml;
return ;
}
});
}
});
};
</script>
</body>
</html>
地区代码：
var region = [
{
"provinceCode": "110000",
"provinceName": "北京市",
"mallCityList": [
{
"cityCode": "110100",
"cityName": "北京市",
"mallAreaList": [
{
"areaCode": "110101",
"areaName": "东城区"
},
{
"areaCode": "110102",
"areaName": "西城区"
},
{
"areaCode": "110105",
"areaName": "朝阳区"
},
{
"areaCode": "110106",
"areaName": "丰台区"
},
{
"areaCode": "110107",
"areaName": "石景山区"
},
{
"areaCode": "110108",
"areaName": "海淀区"
},
{
"areaCode": "110109",
"areaName": "门头沟区"
},
{
"areaCode": "110111",
"areaName": "房山区"
},
{
"areaCode": "110112",
"areaName": "通州区"
},
{
"areaCode": "110113",
"areaName": "顺义区"
},
{
"areaCode": "110114",
"areaName": "昌平区"
},
{
"areaCode": "110115",
"areaName": "大兴区"
},
{
"areaCode": "110116",
"areaName": "怀柔区"
},
{
"areaCode": "110117",
"areaName": "平谷区"
}
]
},
{
"cityCode": "110200",
"cityName": "北京市辖县",
"mallAreaList": [
{
"areaCode": "110228",
"areaName": "密云县"
},
{
"areaCode": "110229",
"areaName": "延庆县"
}
]
}
]
},
{
"provinceCode": "120000",
"provinceName": "天津市",
"mallCityList": [
{
"cityCode": "120100",
"cityName": "天津市",
"mallAreaList": [
{
"areaCode": "120101",
"areaName": "和平区"
},
{
"areaCode": "120102",
"areaName": "河东区"
},
{
"areaCode": "120103",
"areaName": "河西区"
},
{
"areaCode": "120104",
"areaName": "南开区"
},
{
"areaCode": "120105",
"areaName": "河北区"
},
{
"areaCode": "120106",
"areaName": "红桥区"
},
{
"areaCode": "120110",
"areaName": "东丽区"
},
{
"areaCode": "120111",
"areaName": "西青区"
},
{
"areaCode": "120112",
"areaName": "津南区"
},
{
"areaCode": "120113",
"areaName": "北辰区"
},
{
"areaCode": "120114",
"areaName": "武清区"
},
{
"areaCode": "120115",
"areaName": "宝坻区"
},
{
"areaCode": "120116",
"areaName": "滨海新区"
}
]
},
{
"cityCode": "120200",
"cityName": "天津市辖县",
"mallAreaList": [
{
"areaCode": "120221",
"areaName": "宁河县"
},
{
"areaCode": "120223",
"areaName": "静海县"
},
{
"areaCode": "120225",
"areaName": "蓟县"
}
]
}
]
},
{
"provinceCode": "130000",
"provinceName": "河北省",
"mallCityList": [
{
"cityCode": "130100",
"cityName": "石家庄市",
"mallAreaList": [
{
"areaCode": "130102",
"areaName": "长安区"
},
{
"areaCode": "130104",
"areaName": "桥西区"
},
{
"areaCode": "130105",
"areaName": "新华区"
},
{
"areaCode": "130107",
"areaName": "井陉矿区"
},
{
"areaCode": "130108",
"areaName": "裕华区"
},
{
"areaCode": "130109",
"areaName": "藁城区"
},
{
"areaCode": "130110",
"areaName": "鹿泉区"
},
{
"areaCode": "130111",
"areaName": "栾城区"
},
{
"areaCode": "130121",
"areaName": "井陉县"
},
{
"areaCode": "130123",
"areaName": "正定县"
},
{
"areaCode": "130125",
"areaName": "行唐县"
},
{
"areaCode": "130126",
"areaName": "灵寿县"
},
{
"areaCode": "130127",
"areaName": "高邑县"
},
{
"areaCode": "130128",
"areaName": "深泽县"
},
{
"areaCode": "130129",
"areaName": "赞皇县"
},
{
"areaCode": "130130",
"areaName": "无极县"
},
{
"areaCode": "130131",
"areaName": "平山县"
},
{
"areaCode": "130132",
"areaName": "元氏县"
},
{
"areaCode": "130133",
"areaName": "赵县"
},
{
"areaCode": "130181",
"areaName": "辛集市"
},
{
"areaCode": "130183",
"areaName": "晋州市"
},
{
"areaCode": "130184",
"areaName": "新乐市"
}
]
},
{
"cityCode": "130200",
"cityName": "唐山市",
"mallAreaList": [
{
"areaCode": "130202",
"areaName": "路南区"
},
{
"areaCode": "130203",
"areaName": "路北区"
},
{
"areaCode": "130204",
"areaName": "古冶区"
},
{
"areaCode": "130205",
"areaName": "开平区"
},
{
"areaCode": "130207",
"areaName": "丰南区"
},
{
"areaCode": "130208",
"areaName": "丰润区"
},
{
"areaCode": "130209",
"areaName": "曹妃甸区"
},
{
"areaCode": "130223",
"areaName": "滦县"
},
{
"areaCode": "130224",
"areaName": "滦南县"
},
{
"areaCode": "130225",
"areaName": "乐亭县"
},
{
"areaCode": "130227",
"areaName": "迁西县"
},
{
"areaCode": "130229",
"areaName": "玉田县"
},
{
"areaCode": "130281",
"areaName": "遵化市"
},
{
"areaCode": "130283",
"areaName": "迁安市"
}
]
},
{
"cityCode": "130300",
"cityName": "秦皇岛市",
"mallAreaList": [
{
"areaCode": "130302",
"areaName": "海港区"
},
{
"areaCode": "130303",
"areaName": "山海关区"
},
{
"areaCode": "130304",
"areaName": "北戴河区"
},
{
"areaCode": "130321",
"areaName": "青龙满族自治县"
},
{
"areaCode": "130322",
"areaName": "昌黎县"
},
{
"areaCode": "130323",
"areaName": "抚宁县"
},
{
"areaCode": "130324",
"areaName": "卢龙县"
}
]
},
{
"cityCode": "130400",
"cityName": "邯郸市",
"mallAreaList": [
{
"areaCode": "130402",
"areaName": "邯山区"
},
{
"areaCode": "130403",
"areaName": "丛台区"
},
{
"areaCode": "130404",
"areaName": "复兴区"
},
{
"areaCode": "130406",
"areaName": "峰峰矿区"
},
{
"areaCode": "130421",
"areaName": "邯郸县"
},
{
"areaCode": "130423",
"areaName": "临漳县"
},
{
"areaCode": "130424",
"areaName": "成安县"
},
{
"areaCode": "130425",
"areaName": "大名县"
},
{
"areaCode": "130426",
"areaName": "涉县"
},
{
"areaCode": "130427",
"areaName": "磁县"
},
{
"areaCode": "130428",
"areaName": "肥乡县"
},
{
"areaCode": "130429",
"areaName": "永年县"
},
{
"areaCode": "130430",
"areaName": "邱县"
},
{
"areaCode": "130431",
"areaName": "鸡泽县"
},
{
"areaCode": "130432",
"areaName": "广平县"
},
{
"areaCode": "130433",
"areaName": "馆陶县"
},
{
"areaCode": "130434",
"areaName": "魏县"
},
{
"areaCode": "130435",
"areaName": "曲周县"
},
{
"areaCode": "130481",
"areaName": "武安市"
}
]
},
{
"cityCode": "130500",
"cityName": "邢台市",
"mallAreaList": [
{
"areaCode": "130502",
"areaName": "桥东区"
},
{
"areaCode": "130503",
"areaName": "桥西区"
},
{
"areaCode": "130521",
"areaName": "邢台县"
},
{
"areaCode": "130522",
"areaName": "临城县"
},
{
"areaCode": "130523",
"areaName": "内丘县"
},
{
"areaCode": "130524",
"areaName": "柏乡县"
},
{
"areaCode": "130525",
"areaName": "隆尧县"
},
{
"areaCode": "130526",
"areaName": "任县"
},
{
"areaCode": "130527",
"areaName": "南和县"
},
{
"areaCode": "130528",
"areaName": "宁晋县"
},
{
"areaCode": "130529",
"areaName": "巨鹿县"
},
{
"areaCode": "130530",
"areaName": "新河县"
},
{
"areaCode": "130531",
"areaName": "广宗县"
},
{
"areaCode": "130532",
"areaName": "平乡县"
},
{
"areaCode": "130533",
"areaName": "威县"
},
{
"areaCode": "130534",
"areaName": "清河县"
},
{
"areaCode": "130535",
"areaName": "临西县"
},
{
"areaCode": "130581",
"areaName": "南宫市"
},
{
"areaCode": "130582",
"areaName": "沙河市"
}
]
},
{
"cityCode": "130600",
"cityName": "保定市",
"mallAreaList": [
{
"areaCode": "130602",
"areaName": "新市区"
},
{
"areaCode": "130603",
"areaName": "北市区"
},
{
"areaCode": "130604",
"areaName": "南市区"
},
{
"areaCode": "130621",
"areaName": "满城县"
},
{
"areaCode": "130622",
"areaName": "清苑县"
},
{
"areaCode": "130623",
"areaName": "涞水县"
},
{
"areaCode": "130624",
"areaName": "阜平县"
},
{
"areaCode": "130625",
"areaName": "徐水县"
},
{
"areaCode": "130626",
"areaName": "定兴县"
},
{
"areaCode": "130627",
"areaName": "唐县"
},
{
"areaCode": "130628",
"areaName": "高阳县"
},
{
"areaCode": "130629",
"areaName": "容城县"
},
{
"areaCode": "130630",
"areaName": "涞源县"
},
{
"areaCode": "130631",
"areaName": "望都县"
},
{
"areaCode": "130632",
"areaName": "安新县"
},
{
"areaCode": "130633",
"areaName": "易县"
},
{
"areaCode": "130634",
"areaName": "曲阳县"
},
{
"areaCode": "130635",
"areaName": "蠡县"
},
{
"areaCode": "130636",
"areaName": "顺平县"
},
{
"areaCode": "130637",
"areaName": "博野县"
},
{
"areaCode": "130638",
"areaName": "雄县"
},
{
"areaCode": "130681",
"areaName": "涿州市"
},
{
"areaCode": "130682",
"areaName": "定州市"
},
{
"areaCode": "130683",
"areaName": "安国市"
},
{
"areaCode": "130684",
"areaName": "高碑店市"
}
]
},
{
"cityCode": "130700",
"cityName": "张家口市",
"mallAreaList": [
{
"areaCode": "130702",
"areaName": "桥东区"
},
{
"areaCode": "130703",
"areaName": "桥西区"
},
{
"areaCode": "130705",
"areaName": "宣化区"
},
{
"areaCode": "130706",
"areaName": "下花园区"
},
{
"areaCode": "130721",
"areaName": "宣化县"
},
{
"areaCode": "130722",
"areaName": "张北县"
},
{
"areaCode": "130723",
"areaName": "康保县"
},
{
"areaCode": "130724",
"areaName": "沽源县"
},
{
"areaCode": "130725",
"areaName": "尚义县"
},
{
"areaCode": "130726",
"areaName": "蔚县"
},
{
"areaCode": "130727",
"areaName": "阳原县"
},
{
"areaCode": "130728",
"areaName": "怀安县"
},
{
"areaCode": "130729",
"areaName": "万全县"
},
{
"areaCode": "130730",
"areaName": "怀来县"
},
{
"areaCode": "130731",
"areaName": "涿鹿县"
},
{
"areaCode": "130732",
"areaName": "赤城县"
},
{
"areaCode": "130733",
"areaName": "崇礼县"
}
]
},
{
"cityCode": "130800",
"cityName": "承德市",
"mallAreaList": [
{
"areaCode": "130802",
"areaName": "双桥区"
},
{
"areaCode": "130803",
"areaName": "双滦区"
},
{
"areaCode": "130804",
"areaName": "鹰手营子矿区"
},
{
"areaCode": "130821",
"areaName": "承德县"
},
{
"areaCode": "130822",
"areaName": "兴隆县"
},
{
"areaCode": "130823",
"areaName": "平泉县"
},
{
"areaCode": "130824",
"areaName": "滦平县"
},
{
"areaCode": "130825",
"areaName": "隆化县"
},
{
"areaCode": "130826",
"areaName": "丰宁满族自治县"
},
{
"areaCode": "130827",
"areaName": "宽城满族自治县"
},
{
"areaCode": "130828",
"areaName": "围场满族蒙古族自治县"
}
]
},
{
"cityCode": "130900",
"cityName": "沧州市",
"mallAreaList": [
{
"areaCode": "130902",
"areaName": "新华区"
},
{
"areaCode": "130903",
"areaName": "运河区"
},
{
"areaCode": "130921",
"areaName": "沧县"
},
{
"areaCode": "130922",
"areaName": "青县"
},
{
"areaCode": "130923",
"areaName": "东光县"
},
{
"areaCode": "130924",
"areaName": "海兴县"
},
{
"areaCode": "130925",
"areaName": "盐山县"
},
{
"areaCode": "130926",
"areaName": "肃宁县"
},
{
"areaCode": "130927",
"areaName": "南皮县"
},
{
"areaCode": "130928",
"areaName": "吴桥县"
},
{
"areaCode": "130929",
"areaName": "献县"
},
{
"areaCode": "130930",
"areaName": "孟村回族自治县"
},
{
"areaCode": "130981",
"areaName": "泊头市"
},
{
"areaCode": "130982",
"areaName": "任丘市"
},
{
"areaCode": "130983",
"areaName": "黄骅市"
},
{
"areaCode": "130984",
"areaName": "河间市"
}
]
},
{
"cityCode": "131000",
"cityName": "廊坊市",
"mallAreaList": [
{
"areaCode": "131002",
"areaName": "安次区"
},
{
"areaCode": "131003",
"areaName": "广阳区"
},
{
"areaCode": "131022",
"areaName": "固安县"
},
{
"areaCode": "131023",
"areaName": "永清县"
},
{
"areaCode": "131024",
"areaName": "香河县"
},
{
"areaCode": "131025",
"areaName": "大城县"
},
{
"areaCode": "131026",
"areaName": "文安县"
},
{
"areaCode": "131028",
"areaName": "大厂回族自治县"
},
{
"areaCode": "131081",
"areaName": "霸州市"
},
{
"areaCode": "131082",
"areaName": "三河市"
}
]
},
{
"cityCode": "131100",
"cityName": "衡水市",
"mallAreaList": [
{
"areaCode": "131102",
"areaName": "桃城区"
},
{
"areaCode": "131121",
"areaName": "枣强县"
},
{
"areaCode": "131122",
"areaName": "武邑县"
},
{
"areaCode": "131123",
"areaName": "武强县"
},
{
"areaCode": "131124",
"areaName": "饶阳县"
},
{
"areaCode": "131125",
"areaName": "安平县"
},
{
"areaCode": "131126",
"areaName": "故城县"
},
{
"areaCode": "131127",
"areaName": "景县"
},
{
"areaCode": "131128",
"areaName": "阜城县"
},
{
"areaCode": "131181",
"areaName": "冀州市"
},
{
"areaCode": "131182",
"areaName": "深州市"
}
]
}
]
},
{
"provinceCode": "140000",
"provinceName": "山西省",
"mallCityList": [
{
"cityCode": "140100",
"cityName": "太原市",
"mallAreaList": [
{
"areaCode": "140105",
"areaName": "小店区"
},
{
"areaCode": "140106",
"areaName": "迎泽区"
},
{
"areaCode": "140107",
"areaName": "杏花岭区"
},
{
"areaCode": "140108",
"areaName": "尖草坪区"
},
{
"areaCode": "140109",
"areaName": "万柏林区"
},
{
"areaCode": "140110",
"areaName": "晋源区"
},
{
"areaCode": "140121",
"areaName": "清徐县"
},
{
"areaCode": "140122",
"areaName": "阳曲县"
},
{
"areaCode": "140123",
"areaName": "娄烦县"
},
{
"areaCode": "140181",
"areaName": "古交市"
}
]
},
{
"cityCode": "140200",
"cityName": "大同市",
"mallAreaList": [
{
"areaCode": "140202",
"areaName": "城区"
},
{
"areaCode": "140203",
"areaName": "矿区"
},
{
"areaCode": "140211",
"areaName": "南郊区"
},
{
"areaCode": "140212",
"areaName": "新荣区"
},
{
"areaCode": "140221",
"areaName": "阳高县"
},
{
"areaCode": "140222",
"areaName": "天镇县"
},
{
"areaCode": "140223",
"areaName": "广灵县"
},
{
"areaCode": "140224",
"areaName": "灵丘县"
},
{
"areaCode": "140225",
"areaName": "浑源县"
},
{
"areaCode": "140226",
"areaName": "左云县"
},
{
"areaCode": "140227",
"areaName": "大同县"
}
]
},
{
"cityCode": "140300",
"cityName": "阳泉市",
"mallAreaList": [
{
"areaCode": "140302",
"areaName": "城区"
},
{
"areaCode": "140303",
"areaName": "矿区"
},
{
"areaCode": "140311",
"areaName": "郊区"
},
{
"areaCode": "140321",
"areaName": "平定县"
},
{
"areaCode": "140322",
"areaName": "盂县"
}
]
},
{
"cityCode": "140400",
"cityName": "长治市",
"mallAreaList": [
{
"areaCode": "140402",
"areaName": "城区"
},
{
"areaCode": "140411",
"areaName": "郊区"
},
{
"areaCode": "140421",
"areaName": "长治县"
},
{
"areaCode": "140423",
"areaName": "襄垣县"
},
{
"areaCode": "140424",
"areaName": "屯留县"
},
{
"areaCode": "140425",
"areaName": "平顺县"
},
{
"areaCode": "140426",
"areaName": "黎城县"
},
{
"areaCode": "140427",
"areaName": "壶关县"
},
{
"areaCode": "140428",
"areaName": "长子县"
},
{
"areaCode": "140429",
"areaName": "武乡县"
},
{
"areaCode": "140430",
"areaName": "沁县"
},
{
"areaCode": "140431",
"areaName": "沁源县"
},
{
"areaCode": "140481",
"areaName": "潞城市"
}
]
},
{
"cityCode": "140500",
"cityName": "晋城市",
"mallAreaList": [
{
"areaCode": "140502",
"areaName": "城区"
},
{
"areaCode": "140521",
"areaName": "沁水县"
},
{
"areaCode": "140522",
"areaName": "阳城县"
},
{
"areaCode": "140524",
"areaName": "陵川县"
},
{
"areaCode": "140525",
"areaName": "泽州县"
},
{
"areaCode": "140581",
"areaName": "高平市"
}
]
},
{
"cityCode": "140600",
"cityName": "朔州市",
"mallAreaList": [
{
"areaCode": "140602",
"areaName": "朔城区"
},
{
"areaCode": "140603",
&nb