js省市区三级联动

lvbb66

于 2024-04-26 17:19:07 发布

阅读量87

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_80798583/article/details/138224875

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			select {
				width: 20%;
				height: 25px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<select class="prince" onchange="province(value
		)">
			<option class="prince">-请选择省-</option>
		</select>
		<select class="citys" onchange="town(value)">
			<option class="city" placeholder="请选择市">-请先选择省-</option>
		</select>
		<select class="countrys">
			<option class="country" placeholder="请选择县">-请先选择省-</option>
		</select>
		<script src="js/sanjld.js"></script>
	</body>
</html>

let xhr = new XMLHttpRequest();
xhr.open('get', 'js/sanjld.json', true);
xhr.send();
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		let text = xhr.responseText;
		console.log(text);
		data = JSON.parse(text);
		console.log(data);
		item(data);

	}
};

// item(data) 函数：
//接收一个包含省份数据的数组 data 作为参数。
// 遍历数组中的省份数据，将每个省份的名称添加到一个字符串中，并生成对应的 option 标签。
// 将生成的字符串渲染到名为 prince 的 HTML 元素中。

// province(w) 函数：
// 接收一个表示选中省份索引的参数 w。
// 初始化城市和县的选择框内容为空。
// 遍历选中省份对应的城市数据，生成每个城市的 option 标签，并将其渲染到名为 citys 的 HTML 元素中。
// 同时将县的选择框内容设置为“请先选择县”。

// town(a) 函数：
// 接收一个表示选中城市索引的参数 a。
// 初始化县级选择框的内容为空。
// 遍历选中城市对应的县级数据，生成每个县的 option 标签，并将其渲染到名为 countrys 的 HTML 元素中。
// 获取到省市县的数据 let声明新的变量 在文档中通过类名获取数据
let prince = document.getElementsByClassName('prince')[0];
console.log(prince);
let citys = document.getElementsByClassName('citys')[0];
console.log(citys);
let countrys = document.getElementsByClassName('countrys')[0];
console.log(countrys);

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]);
		// 拼接第一个输入框内容，将数据中的省份名称添加到 str 中
		str += `
            <option value="${i}">${data[i].prince}</option>`;
	}
	// 渲染数据到名为 prince 的元素中
	prince.innerHTML = str;
};

// 市级数据渲染
function province(w) {
	console.log(w);
	// 初始化一个字符串 stre，值为 "-请选择市-"
	let stre = `<option class="city">-请选择市-</option>`;
	// 初始化一个字符串 sttrs，值为 "-请先选择县-"
	let sttrs = `<option class="country">-请先选择县-</option>`;
	// 遍历选中省份对应的城市数据
	for (let i = 0; i < data[w].citys.length; i++) {
		// 将城市信息添加到 stre 中作为 option 标签的值和文本
		stre += `<option value="${i}">${data[w].citys[i].city}</option>`;
		abc = data[w]; // 保存当前省份的数据
	}
	// 重新渲染城市选择框的数据
	citys.innerHTML = stre;
	// 重新渲染县级选择框的数据
	countrys.innerHTML = sttrs;
};
// 县级数据渲染
function town(a) {
	console.log(a);
	// 初始化一个字符串 sttrs，值为 "-请选择县-"
	let sttrs = `<option class="country">-请选择县-</option>`;
	// 遍历选中城市对应的县级数据
	for (let i = 0; i < abc.citys[a].conturys.length; i++) {
		// 将县级信息添加到 sttrs 中作为 option 标签的值和文本
		sttrs += `<option value="country">${abc.citys[a].conturys[i].contury}</option>`;
	}
	// 重新渲染县级选择框的数据
	countrys.innerHTML = sttrs;
};

[{
	"prince": "河南省",
	"citys": [{
		"city": "鹤壁市",
		"conturys": [{
			"contury": "淇滨区"
		}, {
			"contury": "浚县"
		}]
	}, {
		"city": "新乡市",
		"conturys": [{
			"contury": "红旗区"
		}, {
			"contury": "牧野区"
		}, {
			"contury": "卫滨区"
		}]
	}]
}, {
	"prince": "河北省",
	"citys": [{
		"city": "石家庄市",
		"conturys": [{
			"contury": "桥西区"
		}, {
			"contury": "新华区"
		}]
	}, {
		"city": "张家口市",
		"conturys": [{
			"contury": "万全区"
		}, {
			"contury": "下花园区"
		}, {
			"contury": "宣化区"
		}]
	}]
}]