省市县三级联动
<!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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<select name="" id="province"></select>
<select name="" id="city"></select>
<select name="" id="district"></select>
<script>
var areaStr = '';
var city = $('#city');
var district = $('#district');
var province = $('#province');
const cityList = {
provinceToCity: {
上海市: ["上海市"],
内蒙古: ["乌兰察布市"],
北京市: ["北京市"],
天津市: ["天津市"],
广东省: ["广州市", "深圳市"],
云南省: ["昆明市"],
辽宁省: ["沈阳市"],
贵州省: ["贵阳市"]
},
cityToArea: {
上海市: ["嘉定区", "杨浦区", "宝山区", "奉贤区",
"普陀区",
"松江区",
"长宁区",
"浦东新区",
"黄埔区",
"闵行区",
"崇明县",
"虹口区",
"青浦区",
"静安区",
"金山区",
"徐汇区"
],
乌兰察布市: [
"丰镇市",
"集宁区",
"察哈尔右翼后旗",
"凉城县",
"商都县",
"卓资县",
"四子王旗",
"察哈尔右翼前旗",
"兴和县",
"化德县"
],
北京市: [
"通州区",
"延庆区",
"门头沟区",
"平谷区",
"丰台区",
"大兴区",
"朝阳区",
"顺义区",
"东城区",
"房山区",
"密云区",
"石景山区",
"海淀区",
"怀柔区",
"昌平区",
"西城区"
],
天津市: [
"北辰区",
"和平区",
"西青区",
"静海区",
"红桥区",
"滨海新区",
"南开区",
"武清区",
"河东区",
"津南区",
"蓟县",
"东丽区",
"宁河区",
"河北区",
"宝坻区",
"河西区"
],
广州市: [
"白云区",
"海珠区",
"从化区",
"荔湾区",
"花都区",
"黄埔区",
"天河区",
"增城区",
"越秀区",
"南沙区",
"番禺区"
],
昆明市: [
"官渡区",
"石林彝族自治县",
"五华区",
"富民县",
"呈贡区",
"寻甸回族彝族自治县",
"西山区",
"嵩明县",
"盘龙区",
"宜良县",
"晋宁县",
"安宁市",
"东川区",
"禄劝彝族苗族自治县",
],
沈阳市: [
"康平县",
"沈河区",
"于洪区",
"浑南区",
"铁西区",
"法库县",
"大东区",
"辽中县",
"和平区",
"沈北新区",
"苏家屯区",
"新民市",
"皇姑区"
],
深圳市: [
"南山区",
"罗湖区",
"盐田区",
"宝安区",
"福田区",
"龙岗区"
],
贵阳市: [
"乌当区",
"云岩区",
"修文县",
"开阳县",
"白云区",
"花溪区",
"清镇市",
"南明区",
"息烽县",
"观山湖区"
],
}
};
// 初始化省市区
getProvince(cityList.provinceToCity);
getCityOrdistrict(cityList.provinceToCity[province.val()], city);
getCityOrdistrict(cityList.cityToArea[city.val()], district);
province.change(function (e) {
city.html('');
district.html('');
getCityOrdistrict(cityList.provinceToCity[e.target.value], city);
getCityOrdistrict(cityList.cityToArea[city.val()], district);
});
city.change(function (e) {
district.html('');
getCityOrdistrict(cityList.cityToArea[e.target.value], district);
});
//获取省的名称
function getProvince(name) {
for (var i = 0; i < Object.keys(name).length; i++) {
areaStr += '<option>' + Object.keys(cityList.provinceToCity)[i] + '</option>';
}
province.append(areaStr);
}
// 获取市和县区的名称
function getCityOrdistrict(name, elem) {
areaStr = '';
for (var i = 0; i < name.length; i++) {
areaStr += '<option>' + name[i] + '</option>';
};
elem.append(areaStr);
}
</script>
</body>
</html>
