如何用JS实现三级联动功能

聂聂脸

已于 2023-11-25 21:01:34 修改

阅读量1k

点赞数 8

文章标签： javascript 开发语言 ecmascript

于 2023-11-25 20:58:06 首次发布

本文链接：https://blog.csdn.net/2301_79420857/article/details/134619868

版权

功能需求：

未选择省级时市级和区级无法选择
未选择市级时无法选择区级
选择相应的省级时市级会出现相对应省级的市
选择相应的市级时区级会出现相对应市级的区
省市区全部选择完之后再重新选择省时要把区级的清空

这其实是个挺简单的功能，就是我刚开始写的时候思路没有捋清楚，导致写的时候很困难。写代码前一定要先捋清思路，先写伪代码。下面请看代码（有注释很清晰了）。主要就是功能，所以我就没有写样式，如果有需要请大家自己添加把。

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>三级联动功能</title>
		<link href="./css/three.css" />
	</head>
	<body>
		
		<form id="menu">
			<!-- 省份选择 -->
			<select id="one" onchange="province()">
				<option value="">请选择省</option>
			</select>
			
			<!-- 城市选择 -->
			<select id="two" onchange="wardenry()">
				<option value="">请选择市</option>
			</select>
			
			<!-- 区选择 -->
			<select id="three">
				<option value="">请选择区</option>
			</select>
		</form>
		
		<script src="./js/three.js"></script>
	</body>
</html>

JSON数据：

[{
	"province": "河南省",
	"city": [{
		"town": "新乡市",
		"area": ["卫滨区","红旗区","高新区","牧野区"]
	},{
		"town": "郑州市",
		"area": ["中原区","二七区","金水区","新密区"]
	},{
		"town": "洛阳市",
		"area": ["老城区","洛龙区","孟津区"]
	}]
}, {
	"province": "山东省",
	"city": [{
		"town": "临沂市",
		"area": ["兰山区","河东区","沂水区","费县"]
	},{
		"town": "青岛市",
		"area": ["市北区","市南区","黄岛区","城阳区"]
	},{
		"town": "淄博市",
		"area": ["淄川区","博山区","周村区","张店区"]
	}]
}, {
	"province": "黑龙江省",
	"city": [{
		"town": "哈尔滨市",
		"area": ["香坊区","松北区","呼兰区","道里区"]
	},{
		"town": "齐齐哈尔市",
		"area": ["建华区","龙沙区","铁锋区","泰来县"]
	},{
		"town": "鸡西市",
		"area": ["鸡冠区","恒山区","梨树区","麻山区"]
	}]
}]

JS代码：

// 在html中创建三个下拉选择框
// 后分别获取这三个下拉选择框
// 省
let one = document.getElementById('one');
// 市
let two = document.getElementById('two');
// 区
let three = document.getElementById('three');

// 写JSON数据
// 通过请求获取JSON的数据（要给一个变量使它变成全局的）
let data = []; //全局
let xml = new XMLHttpRequest();
xml.open('get', './js/three.json');
xml.send();
xml.onreadystatechange = function() {
	if (xml.readyState == 4 && xml.status == 200) {
		let text = xml.responseText;
		// 请求到的数据（data已经是全局的了）
		data = JSON.parse(text);
		// 请求到值过后可以直接渲染（写到if判断后无法判断它是否获取到数据）
		let str = "<option>请选择省</option>";
		// let ones = document.getElementById('one').value
		for (let i = 0; i < data.length; i++) {
			// 找数组下标的省级
			str += `<option value="${i}">${data[i].province}</option>`
		}
		// 渲染好的字符串拼接写到省份里
		one.innerHTML = str;
	}
}
// 添加到省级下拉框

let ones;

// 给省级下拉框绑定onchange事件
function province() {
	let str = "";
	// 获取的是省份下拉选择框的值
	ones = document.getElementById('one').value
	// console.log(ones);
	// 遍历城市数组（循环查找相对应的索引）
	// for循环获取省份的值的市的长度（one是省的下拉选框，ones是获取的值）
	for (let i = 0; i < data[ones].city.length; i++) {
		// 字符串拼接value值要变，市要变。数组的省值的城市的下标town（寻找城市）
		str += `<option value="${i}">${data[ones].city[i].town}</option>`
	}
	// 拼接写到城市two里
	two.innerHTML = str;
	three.innerHTML = '<option value="">请选择区</option>';
}

function wardenry() {
	let str = "";
	// 获取的是城市下拉选择框的值
	let twos = document.getElementById('two').value;
	console.log(twos);
	// 遍历区数组（循环查找相对应的索引）一步一步找，省值市值区长度
	for (let i = 0; i < data[ones].city[twos].area.length; i++) {
		// 字符串拼接value值要变，市要变。数组的值的城市的名字town
		str += `<option value="${i}">${data[ones].city[twos].area[i]}</option>`
	}
	three.innerHTML = str;
}

总结：
1需要先获取三个下拉框
2let一个全局的数据为空
3请求数据请求过后直接渲染循环拼接字符串
4给省级下拉框绑定onchange事件
5循环数组省级下拉框的值的市级的长度
6拼接省级下拉框的值的市级的下标
7给区下拉框绑定onchange事件
8循环数组省级下拉框的值的市级的值的区的长度
9省级下拉框的值的市级的值的区的下标
注意：
1.刚开始let的一个字符串为空所以渲染的数据直接就是河南
可是下拉框选项页面上的默认值应该是“请选择省/市/区”
所以给为空的字符串添加默认的option
2.省市区全部选择完毕后，我们重新选择省的时候，区是不会变的
我们给绑定的省级使书写到区级的内容为空，让其重新选择就好了。