JavaScript三级联动练习

最新推荐文章于 2024-09-27 21:41:13 发布

派大鑫的工作室

最新推荐文章于 2024-09-27 21:41:13 发布

阅读量218

点赞数 1

文章标签： sql 数据库

本文链接：https://blog.csdn.net/Cc040909/article/details/140551166

版权

<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>三级联动</title>
		<style>
			select {
				margin-bottom: 10px;
				padding: 5px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<select id="province" onchange="citys()">
			<option value="">请选择省份</option>
		</select>

		<select id="city" onchange="areas()">
			<option value="">请选择市区</option>
		</select>

		<select id="county" onchange="" onclick="alerts()">
			<option value="">请选择区县</option>
		</select>
	</body>

script部分

<script>
		// 加载省市县的数据
		let province = document.getElementById('province');
		let city = document.getElementById('city');
		let area = document.getElementById('area');
		let data;
		// 创建XMLHttpRequest对象
		let xhr = new XMLHttpRequest();
		// 获取到json中的假数据
		xhr.open('get', 'js/local.json', true);
		xhr.send();
		xhr.onreadystatechange = function() {
			// 进行判断 看看状态是否为200 
			if (xhr.readyState == 4 && xhr.status == 200) {
				let text = xhr.responseText;
				data = JSON.parse(text);
				provinces(data);
			}
		}


		function provinces(data) {
			let str = "";
			for (let i = 0; i < data.length; i++) {
				str += `<option value="${data[i].name}">${data[i].name}</option>`
			}
			province.innerHTML += str;

		}

		function citys() {
			console.log(data);
			let str = "";
			let pro = province.value;
			for (let i = 0; i < data.length; i++) {
				if (pro == data[i].name) {
					console.log(data[i]);
					for (let j = 0; j < data[i].city.length; j++) {
						str += `<option value="${data[i].city[j].name}">${data[i].city[j].name}</option>`
					}
					city.innerHTML = str;
				}
			}
		}


		function areas() {
			let str = '<option value="">请选择区</option>';
			let pro = province.value;
			let cityes = city.value;
			for (let i = 0; i < data.length; i++) {
				if (pro == data[i].name) {
					console.log(data[i]);
					for (let j = 0; j < data[i].city.length; j++) {
						if (cityes == data[i].city[j].name) {
							for (let o = 0; o < data[i].city[j].count.length; o++) {
								str += `<option value="${data[i].city[j].count[o]}">${data[i].city[j].count[o]}</option>`
							}
							county.innerHTML = str;
						}
					}
				}
			}
		}

		// 弹窗
		function alerts() {
			let provinces = province.value;
			let cityes = city.value;
			let counts = county.value;

			setTimeout(function() {
				alert(provinces +cityes+counts)
			},10000)
		}
	</script>