JS实现三级联动下拉地区列表
♾️ html 代码:<!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>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 1000px;
margin: 100px auto;
text-align: center;
}
select {
width: 200px;
height: 36px;
font-size: 24px;
outline: none;
}
</style>
</head>
<body>
<div class="wrap">
<select id="province">
<option>--请选择--</option>
</select>
<select id="city">
<option>--请选择--</option>
</select>
<select id="area">
<option>--请选择--</option>
</select>
</div>
<!-- 引入数据 -->
<script src="./js/data.js"></script>
<script>
// 获取省选项
let province = document.querySelector('#province');
// 获取城市选项
let city = document.querySelector('#city');
// 获取区域选项
let area = document.querySelector('#area');
// 封装一个item用来遍历数据
function Item(data, name) {
// 循环遍历数据
data.map((item) => {
// item.name就是获取每个省会
name.innerHTML += `<option>${item.name}</option>`;
})
}
// 渲染省
Item(data, province)
let provinceText = '';
// 离开省选项就获取对应被选中的值
province.onblur = function () {
city.innerHTML = '<option>--请选择--</option>';
area.innerHTML = '<option>--请选择--</option>';
// 获取选项框被选中的选项索引号
let index = province.selectedIndex;
// 得到被选中的那个选项值
let text = province[index].text;
provinceText = text;
data.map((item) => {
// 找出被选中的那个值匹配的对象
if (item.name == text) {
// 用来临时存储每个对象
let arr = [];
// 再获取他的市辖区/县/城市
item.cityList.map((item) => {
// 将每个对象临时存储给arr这个数组
arr.push(item);
// 渲染城市
Item(arr, city);
// 每次循环结束后就清空
arr = [];
})
// 找到了就不让他在继续循环下去了,可优化代码性能
return true;
}
});
}
// 离开城市选项就获取对应被选中的值
area.onfocus = function () {
area.innerHTML = '<option>--请选择--</option>';
// 获取选项框被选中的选项索引号
let index = city.selectedIndex;
// 得到被选中的那个选项值
let text = city[index].text;
console.log(text);
data.map((item) => {
if (item.name == provinceText) {
item.cityList.map((item) => {
console.log(item);
if (item.name == text) {
console.log(item);
console.log(provinceText);
// 用来临时存储每个对象
let arr = [];
// 再获取他的市辖区/县/城市
item.areaList.map((item) => {
area.innerHTML += `<option>${item}</option>`;
})
// 找到了就不让他在继续循环下去了,可优化代码性能
return true;
}
})
}
});
}
</script>
</body>
</html>