JS三级联动功能制作

最新推荐文章于 2024-06-18 14:37:18 发布

乐多_L

最新推荐文章于 2024-06-18 14:37:18 发布

阅读量478

点赞数 16

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_81449444/article/details/135965769

版权

使用js写的三级联动有两个城市：河南，广东；

HTML部分写一个框架通过js渲染就可以不用HTML的内容。

<body>
		<select class="sheng" onchange="province()">
			<option class="dart">-请选择省-</option>
		</select>
		<select class="shi" onchange="town()">
			<option class="city" placeholder="请选择市">-请先选择省-</option>
			<!-- <option value="安阳">安阳</option>
			<option value="新乡">新乡</option>
			<option value="洛阳">洛阳</option> -->
		</select>
		<select class="xian">
			<option class="area" placeholder="请选择县">-请先选择省-</option>
			<!-- <option value="文峰区">文峰区</option>
			<option value="北关区">北关区</option>
			<option value="殷都区">殷都区</option>
			<option value="龙安区">龙安区</option> -->
		</select>
		<script src="js/index.js"></script>
	</body>

CSS部分

        <style>
			select {
				width: 20%;
				height: 25px;
				margin: 20px;
			}
		</style>

json假数据部分

[{
	"dart": "河南省",
	"child": [{
		"city": "安阳市",
		"child": [{
			"area": "文峰区"
		}, {
			"area": "北关区"
		}, {
			"area": "殷都区"
		}, {
			"area": "龙安区"
		}]
	}, {
		"city": "新乡市",
		"child": [{
			"area": "新乡县"
		}, {
			"area": "延津县"
		}, {
			"area": "原阳县"
		}, {
			"area": "封丘县"
		}, {
			"area": "长垣县"
		}]
	}, {
		"city": "洛阳市",
		"child": [{
			"area": "洛龙区"
		}, {
			"area": "偃师市"
		}, {
			"area": "汝阳县"
		}, {
			"area": "吉利区"
		}, {
			"area": "新安县"
		}]
	}]
}, {
	"dart": "广东省",
	"child": [{
		"city": "广州市",
		"child": [{
			"area": "海珠"
		}, {
			"area": "荔湾"
		}, {
			"area": "天河"
		}, {
			"area": "白云"
		}]
	}, {
		"city": "深圳市",
		"child": [{
			"area": "宝安"
		}, {
			"area": "龙岗"
		}, {
			"area": "龙华"
		}, {
			"area": "坪山"
		}, {
			"area": "南山"
		}]
	}]
}]

JS部分代码及伪代码

// let声明变量为总数据
let data;
// 创建新的XMLHttpRequest（可扩展超文本传输请求）对象
let xhr = new XMLHttpRequest();
// 使用open方法指定要请求的地址 路径 类型及方式
xhr.open('get', 'js/index.json', true);
// 发送数据
xhr.send();
// 绑定onreadystatechange（定义响应执行函数）事件，判断readyState和status的状态
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 响应文本（返回的数据）
		let text = xhr.responseText;
		console.log(text);
		// 接收数据，通过 json 转换使用 把json数据转化为数据或对象
		data = JSON.parse(text);
		console.log(data);
		// 渲染函数
		item(data);
	}
};

// 获取到省 市 县的数据 let声明新的变量 在文档中通过类名获取数据
let sheng = document.getElementsByClassName('sheng')[0];
console.log(sheng);
let shi = document.getElementsByClassName('shi')[0];
console.log(shi);
let xian = document.getElementsByClassName('xian')[0];
console.log(xian);
// 省级数据渲染
function item(data) {
	console.log(data);
	// 初始化一个字符串 str，值为 "-请选择省-"
	let str = `<option class="city" >-请选择省-</option>`;
	// 遍历数组
	for (let i = 0; i < data.length; i++) {
		console.log(data[i]);
		// 拼接第一个输入框内容 将dart的数据添加到str中
		str += `
			<option value="${i}">${data[i].dart}</option>`;
	}
	// 渲染数据
	sheng.innerHTML = str;
};
// 市级数据渲染
function province() {
	console.log(sheng.value);
	// 初始化一个字符串 stre，值为 "-请选择市-"
	let stre = `<option class="city" >-请选择市-</option>`;
	// 初始化一个字符串 stres，值为 "-请先选择市-"
	let stres = `<option class="area" >-请先选择市-</option>`;
	// for循环遍历数据 对于 data[sheng.value].child 中的每一个子元素：
	for (let i = 0; i < data[sheng.value].child.length; i++) {
		//将子元素的 city 添加到 stre 中，作为 option 标签的值和文本
		stre += `<option value="${i}">${data[sheng.value].child[i].city}</option>`;
		console.log(data[sheng.value].child[i]);
	};
	// 重新渲染stre的数据
	shi.innerHTML = stre;
	// 重新渲染stres的数据
	xian.innerHTML = stres;
};
// 县级数据渲染
function town() {
	// 初始化一个字符串 stres，值为 "-请选择县-"
	let stres = `<option class="area" >-请选择县-</option>`;
	// 对于 data[sheng.value].child[shi.value].child 中的每一个子元素：
	for (let i = 0; i < data[sheng.value].child[shi.value].child.length; i++) {
		console.log(data[sheng.value].child[shi.value].child[i].area);
		// 将子元素的 area 添加到 stres 中，作为 option 标签的值和文本
		stres += `<option value="area">${data[sheng.value].child[shi.value].child[i].area}</option>`;
	}
	// 重新渲染stres的数据
	xian.innerHTML = stres;
};

河南，广东三级联动完成