纯js实现省市区三级联动
话不多说，直接上整篇代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<script type="text/javascript" src="./region.js"></script>
</head>
<body>
省：<select name="province" id="province"></select>
市：<select name="city" id="city"></select>
区：<select name="county" id="county"></select>
<script type="text/javascript">
var data = obj.regions;
var province=document.getElementById('province');
var city=document.getElementById('city');
var county=document.getElementById('county');
var option = "<option value='请选择'>请选择</option>";
province.innerHTML = option;
city.innerHTML = option;
county.innerHTML = option;
// 生成省列表
for(var i=0;i<data.length;i++){
var option_province=document.createElement('option');
option_province.value=data[i].name;
option_province.innerText=data[i].name;
province.appendChild(option_province);
}
// 根据选择的省生成相应的城市列表
province.onchange=function(e){
for(var i=0;i<data.length;i++){
if(data[i].name == e.target.value){
var data_city=data[i].regions;
var option_city=data_city.map(function(item){
return `<option value="${item.name}">${item.name}</option>`
}).join('');
// 根据选择的城市生成相应的县级列表
city.onchange=function(evt){
for(var j=0;j<data_city.length;j++){
if(data_city[j].name == evt.target.value){
var data_county=data_city[j].regions;
var option_count=data_county.map(function(items){
return `<option value="${items.name}">${items.name}</option>`
}).join('');
}
}
county.innerHTML="<option value='请选择'>请选择</option>"+option_count;
}
}
}
city.innerHTML="<option value='请选择'>请选择</option>"+option_city;
county.innerHTML="<option value='请选择'>请选择</option>"
}
</script>
</body>
</html>
效果如下：
说明：上面代码引入的<script type="text/javascript" src="./region.js"></script>是包含省市区数据的文件，文件部分内容如下，如需全篇内容，可点击此处查看整篇内容：
var obj = {
“regions”: [{
“id”: 110000,
“name”: “北京”,
“regions”: [{
“id”: 110100,
“name”: “北京市”,
“regions”: [{
“id”: 110101,
“name”: “东城区”
}, {
“id”: 110102,
“name”: “西城区”
}, {
“id”: 110103,
“name”: “崇文区”
}, {
“id”: 110104,
“name”: “宣武区”
}, {
“id”: 110105,
“name”: “朝阳区”
}, {
“id”: 110106,
“name”: “丰台区”
}, {
“id”: 110107,
“name”: “石景山区”
}, {
“id”: 110108,
“name”: “海淀区”
}, {
“id”: 110109,
“name”: “门头沟区”
}, {
“id”: 110111,
“name”: “房山区”
}, {
“id”: 110112,
“name”: “通州区”
}, {
“id”: 110113,
“name”: “顺义区”
}, {
“id”: 110114,
“name”: “昌平区”
}, {
“id”: 110115,
“name”: “大兴区”
}, {
“id”: 110116,
“name”: “怀柔区”
}, {
“id”: 110117,
“name”: “平谷区”
}, {
“id”: 110228,
“name”: “密云县”
}, {
“id”: 110229,
“name”: “延庆县”
}]
}],
“pinyin”: “BeiJing”,
“hot”: true,
“municipality”: true
}, {
“id”: 120000,
“name”: “天津”,
“regions”: [{
“id”: 120100,
“name”: “天津市”,
“regions”: [{
“id”: 120101,
“name”: “和平区”
}, {
“id”: 120102,
“name”: “河东区”
}, {
“id”: 120103,
“name”: “河西区”
}, {
“id”: 120104,
“name”: “南开区”
}, {
“id”: 120105,
“name”: “河北区”
}, {
“id”: 120106,
“name”: “红桥区”
}, {
“id”: 120107,
“name”: “塘沽区”
}, {
“id”: 120108,
“name”: “汉沽区”
}, {
“id”: 120109,
“name”: “大港区”
}, {
“id”: 120110,
“name”: “东丽区”
}, {
“id”: 120111,
“name”: “西青区”
}, {
“id”: 120112,
“name”: “津南区”
}, {
“id”: 120113,
“name”: “北辰区”
}, {
“id”: 120114,
“name”: “武清区”
}, {
“id”: 120115,
“name”: “宝坻区”
}, {
“id”: 120221,
“name”: “宁河县”
}, {
“id”: 120223,
“name”: “静海县”
}, {
“id”: 120225,
“name”: “蓟县”
}]
}],
“pinyin”: “TianJin”,
“hot”: true,
“municipality”: true
}]
