中国省市区的数据在github和gitee上面都有，直接搜索china-area-data即可。
如果你比较赶时间，可以直接点击链接：https://gitee.com/mirrors_airyland/china-area-data/blob/master/v5/data.json#
全部的代码大约4600多行，不过不要被吓到，其实4600行都是中国省市区的数据，实际实现功能的代码只有几十行，下面我只放北京、天津、河北省市区的数据，告诉你代码怎么放进去，完整的自己去链接里拷贝。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<select name='province' id='province'></select>
<select name='city' id='city'></select>
<select name='country' id='country'></select>
<script>
var data = {
"86": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省",
"150000": "内蒙古自治区",
"210000": "辽宁省",
"220000": "吉林省",
"230000": "黑龙江省",
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省",
"350000": "福建省",
"360000": "江西省",
"370000": "山东省",
"410000": "河南省",
"420000": "湖北省",
"430000": "湖南省",
"440000": "广东省",
"450000": "广西壮族自治区",
"460000": "海南省",
"500000": "重庆市",
"510000": "四川省",
"520000": "贵州省",
"530000": "云南省",
"540000": "西藏自治区",
"610000": "陕西省",
"620000": "甘肃省",
"630000": "青海省",
"640000": "宁夏回族自治区",
"650000": "新疆维吾尔自治区",
"710000": "台湾省",
"810000": "香港特别行政区",
"820000": "澳门特别行政区"
},
"110000": {
"110100": "市辖区"
},
"110100": {
"110101": "东城区",
"110102": "西城区",
"110105": "朝阳区",
"110106": "丰台区",
"110107": "石景山区",
"110108": "海淀区",
"110109": "门头沟区",
"110111": "房山区",
"110112": "通州区",
"110113": "顺义区",
"110114": "昌平区",
"110115": "大兴区",
"110116": "怀柔区",
"110117": "平谷区",
"110118": "密云区",
"110119": "延庆区"
},
"120000": {
"120100": "市辖区"
},
"120100": {
"120101": "和平区",
"120102": "河东区",
"120103": "河西区",
"120104": "南开区",
"120105": "河北区",
"120106": "红桥区",
"120110": "东丽区",
"120111": "西青区",
"120112": "津南区",
"120113": "北辰区",
"120114": "武清区",
"120115": "宝坻区",
"120116": "滨海新区",
"120117": "宁河区",
"120118": "静海区",
"120119": "蓟州区"
},
"130000": {
"130100": "石家庄市",
"130200": "唐山市",
"130300": "秦皇岛市",
"130400": "邯郸市",
"130500": "邢台市",
"130600": "保定市",
"130700": "张家口市",
"130800": "承德市",
"130900": "沧州市",
"131000": "廊坊市",
"131100": "衡水市"
},
"130100": {
"130101": "市辖区",
"130102": "长安区",
"130104": "桥西区",
"130105": "新华区",
"130107": "井陉矿区",
"130108": "裕华区",
"130109": "藁城区",
"130110": "鹿泉区",
"130111": "栾城区",
"130121": "井陉县",
"130123": "正定县",
"130125": "行唐县",
"130126": "灵寿县",
"130127": "高邑县",
"130128": "深泽县",
"130129": "赞皇县",
"130130": "无极县",
"130131": "平山县",
"130132": "元氏县",
"130133": "赵县",
"130171": "石家庄高新技术产业开发区",
"130172": "石家庄循环化工园区",
"130181": "辛集市",
"130183": "晋州市",
"130184": "新乐市"
},
"130200": {
"130201": "市辖区",
"130202": "路南区",
"130203": "路北区",
"130204": "古冶区",
"130205": "开平区",
"130207": "丰南区",
"130208": "丰润区",
"130209": "曹妃甸区",
"130224": "滦南县",
"130225": "乐亭县",
"130227": "迁西县",
"130229": "玉田县",
"130271": "河北唐山芦台经济开发区",
"130272": "唐山市汉沽管理区",
"130273": "唐山高新技术产业开发区",
"130274": "河北唐山海港经济开发区",
"130281": "遵化市",
"130283": "迁安市",
"130284": "滦州市"
},
"130300": {
"130301": "市辖区",
"130302": "海港区",
"130303": "山海关区",
"130304": "北戴河区",
"130306": "抚宁区",
"130321": "青龙满族自治县",
"130322": "昌黎县",
"130324": "卢龙县",
"130371": "秦皇岛市经济技术开发区",
"130372": "北戴河新区"
},
"130400": {
"130401": "市辖区",
"130402": "邯山区",
"130403": "丛台区",
"130404": "复兴区",
"130406": "峰峰矿区",
"130407": "肥乡区",
"130408": "永年区",
"130423": "临漳县",
"130424": "成安县",
"130425": "大名县",
"130426": "涉县",
"130427": "磁县",
"130430": "邱县",
"130431": "鸡泽县",
"130432": "广平县",
"130433": "馆陶县",
"130434": "魏县",
"130435": "曲周县",
"130471": "邯郸经济技术开发区",
"130473": "邯郸冀南新区",
"130481": "武安市"
},
"130500": {
"130501": "市辖区",
"130502": "桥东区",
"130503": "桥西区",
"130521": "邢台县",
"130522": "临城县",
"130523": "内丘县",
"130524": "柏乡县",
"130525": "隆尧县",
"130526": "任县",
"130527": "南和县",
"130528": "宁晋县",
"130529": "巨鹿县",
"130530": "新河县",
"130531": "广宗县",
"130532": "平乡县",
"130533": "威县",
"130534": "清河县",
"130535": "临西县",
"130571": "河北邢台经济开发区",
"130581": "南宫市",
"130582": "沙河市"
},
"130600": {
"130601": "市辖区",
"130602": "竞秀区",
"130606": "莲池区",
"130607": "满城区",
"130608": "清苑区",
"130609": "徐水区",
"130623": "涞水县",
"130624": "阜平县",
"130626": "定兴县",
"130627": "唐县",
"130628": "高阳县",
"130629": "容城县",
"130630": "涞源县",
"130631": "望都县",
"130632": "安新县",
"130633": "易县",
"130634": "曲阳县",
"130635": "蠡县",
"130636": "顺平县",
"130637": "博野县",
"130638": "雄县",
"130671": "保定高新技术产业开发区",
"130672": "保定白沟新城",
"130681": "涿州市",
"130682": "定州市",
"130683": "安国市",
"130684": "高碑店市"
},
"130700": {
"130701": "市辖区",
"130702": "桥东区",
"130703": "桥西区",
"130705": "宣化区",
"130706": "下花园区",
"130708": "万全区",
"130709": "崇礼区",
"130722": "张北县",
"130723": "康保县",
"130724": "沽源县",
"130725": "尚义县",
"130726": "蔚县",
"130727": "阳原县",
"130728": "怀安县",
"130730": "怀来县",
"130731": "涿鹿县",
"130732": "赤城县",
"130771": "张家口经济开发区",
"130772": "张家口市察北管理区",
"130773": "张家口市塞北管理区"
},
"130800": {
"130801": "市辖区",
"130802": "双桥区",
"130803": "双滦区",
"130804": "鹰手营子矿区",
"130821": "承德县",
"130822": "兴隆县",
"130824": "滦平县",
"130825": "隆化县",
"130826": "丰宁满族自治县",
"130827": "宽城满族自治县",
"130828": "围场满族蒙古族自治县",
"130871": "承德高新技术产业开发区",
"130881": "平泉市"
},
"130900": {
"130901": "市辖区",
"130902": "新华区",
"130903": "运河区",
"130921": "沧县",
"130922": "青县",
"130923": "东光县",
"130924": "海兴县",
"130925": "盐山县",
"130926": "肃宁县",
"130927": "南皮县",
"130928": "吴桥县",
"130929": "献县",
"130930": "孟村回族自治县",
"130971": "河北沧州经济开发区",
"130972": "沧州高新技术产业开发区",
"130973": "沧州渤海新区",
"130981": "泊头市",
"130982": "任丘市",
"130983": "黄骅市",
"130984": "河间市"
},
"131000": {
"131001": "市辖区",
"131002": "安次区",
"131003": "广阳区",
"131022": "固安县",
"131023": "永清县",
"131024": "香河县",
"131025": "大城县",
"131026": "文安县",
"131028": "大厂回族自治县",
"131071": "廊坊经济技术开发区",
"131081": "霸州市",
"131082": "三河市"
},
"131100": {
"131101": "市辖区",
"131102": "桃城区",
"131103": "冀州区",
"131121": "枣强县",
"131122": "武邑县",
"131123": "武强县",
"131124": "饶阳县",
"131125": "安平县",
"131126": "故城县",
"131127": "景县",
"131128": "阜城县",
"131171": "河北衡水高新技术产业开发区",
"131172": "衡水滨湖新区",
"131182": "深州市"
},
};
// 给一个id 渲染select
function init(elementId, data) {
let inner = '';
for (let city in data) {
inner += '<option value="' + city + '">' + data[city] + '</option>'
document.getElementById(elementId).innerHTML = inner;
}
}
// 初始化省市区，以北京市为例
init('province', data['86']);
init('city', data['110000']);
init('country', data['110100']);
let province = document.getElementById('province');
province.addEventListener('change', function() {
init('city', data[this.value]);
init('country', data[document.getElementById('city').value]);
})
let city = document.getElementById('city');
city.addEventListener('change', function() {
init('country', data[this.value]);
})
</script>
</body>
</html>
运行效果：
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
