纯JS实现三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="province">
<option>--请选择省--</option>
</select>
<select id="city">
<option>--请选择市--</option>
</select>
<select id="county">
<option>--请选择区--</option>
</select>
<script>
var province = document.querySelector('#province');
var city = document.querySelector('#city');
var county = document.querySelector('#county');
// 数据
var arr = [{
province: "北京",
type: "直辖市",
cities: [{
name: "朝阳区",
county: []
}, {
name: "东城区",
county: []
}, {
name: "西城区",
county: []
}, {
name: "大兴区",
county: []
}, {
name: "丰台",
county: []
}, {
name: "昌平",
county: []
}]
}, {
province: "山东",
type: "省",
cities: [{
name: '济南',
county: [{
name: '天桥区'
}, {
name: '市中区'
}, {
name: "长清区"
}]
}, {
name: "青岛",
county: [{
name: "市南区"
}, {
name: "市北区"
}, {
name: "胶南市"
}, {
name: "城阳区"
}]
}]
}, {
province: "广东",
type: "省",
cities: [{
name: "广州",
county: [{
name: "天河区"
}, {
name: "白云区",
}, {
name: "黄浦区"
}, {
name: "海珠区"
}]
}, {
name: "深圳",
county: [{
name: "宝安区"
}, {
name: "福田区"
}, {
name: "罗湖区"
}, {
name: "南山区"
}]
}, {
name: "江门",
county: [{
name: "蓬江区"
}, {
name: "江海区"
}, {
name: "新会"
}, {
name: "台山"
}]
},
]
}]
// var province = '';
//将数组中的省份渲染给省份下拉框
arr.forEach(item => {
// console.log(item.province);
var option = document.createElement('option');
option.innerHTML = item.province;
option.value = item.province
province.appendChild(option);
})
//当省份下拉框改变时
province.onchange = function() {
city.innerHTML = "<option>--请选择市--</option>";
county.innerHTML = "<option>--请选择区--</option>";
//得到当前省份下拉框的值 以便于之后得到对应市下拉框的值
nowProvince = province.value;
//使用当前省份的值过滤出arr的值 此时得到的arr1的是一个包含province type cities
var arr1 = arr.filter(item => {
return item.province === nowProvince;
})[0]
// console.log(arr1);
// console.log(arr1);
if (!arr1) {
city.innerHTML = "<option>--请选择市--</option>";
county.innerHTML = "<option>--请选择区--</option>";
return
}
//将arr1中的cities给city1 此时的city1是一个数组
var city1 = arr1.cities;
// console.log(city1);
//循环这个数组得到这个city1中市的名字 然后将其渲染到option中
city1.forEach(item => {
var option = document.createElement('option');
option.innerHTML = item.name;
option.value = item.name
city.appendChild(option);
})
}
//当city选项框发送改变的时候
city.onchange = function() {
county.innerHTML = "<option>--请选择区--</option>";
//得到当前省的值
nowProvince = province.value;
//得到当前市的值
nowCity = city.value;
//通过当前省份的值过滤出当前省份中的所有信息
var arr1 = arr.filter(item => {
return item.province === nowProvince;
})[0]
console.log(arr1);
//通过当前市的值过滤出当前市中的所有信息
var arr2 = arr1.cities.filter(item => {
// console.log(item);
return item.name === nowCity;
})[0]
console.log(arr2);
if (!arr2) {
county.innerHTML = "<option>--请选择区--</option>";
return;
}
//将市中的区的值渲染给option
arr2.county.forEach(item => {
var option = document.createElement('option');
option.innerHTML = item.name;
option.value = item.name
county.appendChild(option);
})
// console.log(1);
}
</script>
</body>
</html>