純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
}]