四级联动省市县乡

Sco_20liu

已于 2022-06-03 17:58:42 修改

阅读量133

点赞数

文章标签： css html javascript

于 2022-06-02 21:29:21 首次发布

本文链接：https://blog.csdn.net/Sco_20liu/article/details/125107186

版权

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>四级联动</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	header {
	width: 100%;
	height: 60px;
	background-color: aliceblue;
	/* border: 1px solid #000; */
	}

	#adr {
	width: 1000px;
	margin: auto;
	height: 60px;
	display: flex;
	align-items: center;
	}

	#adr div {
	margin-right: 20px;
	}

	ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	}

	ul li {
	padding: 5px;
	}
	#mask{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	}
	#adrAll {
	width: 1000px;
	height: 600px;
	margin: auto;
	display: none;
	background-color: azure;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}
	#adrAll div{
	cursor: pointer;
	}
	#citAll,#areAll,#offAll{
	display: none;
	}
	#cut{
	cursor: pointer;
	color: red;
	}

	</style>
	</head>

	<body>
	<header>
	<div id="adr">
	<div class="pro">河南省</div>
	<div class="cit">郑州市</div>
	<div class="are">中原区</div>
	<div class="off">林山寨街道办事处</div>
	<div id="cut">[切换]</div>
	</div>
	<div id="mask">
	<div id="adrAll">
	<div id="proAll">
	<h3>省份:</h3>
	</div>
	<div id="citAll">
	<h3>城市:</h3>
	<ul id="citList"></ul>
	</div>
	<div id="areAll">
	<h3>区域:</h3>
	<ul id="areList"></ul>
	</div>
	<div id="offAll">
	<h3>街道:</h3>
	<ul id="offList"></ul>
	</div>
	</div>
	</div>
	</header>

	<script src="./area.js"></script>
	<script>
	console.log(area);
	var proAll = document.getElementById('proAll');
	var citList = document.getElementById('citList');
	var areList = document.getElementById('areList');
	var offList = document.getElementById('offList');

	//点击切换展示adrAll
	cut.οnclick=function(){
	mask.style.display='block'
	adrAll.style.display='block'

	}
	//省份城市区域街道
	var proselect
	var citselect
	var areselect
	var offselect


	var proAllStr = '<ul>';
	// 省份列表
	for (a in area) {
	proAllStr += `<li>${a}</li>`
	}
	proAllStr += `</ul>`;
	proAll.innerHTML += proAllStr;

	//省份列表点击事件委托
	proAll.onclick = function () {
	//显示城市盒子，隐藏区域和街道
	citAll.style.display='block'
	areAll.style.display='none'
	offAll.style.display='none'

	// 获取点击的省份名称
	proselect = event.target.innerHTML;
	//定义储存点击的省份对象
	var citySel = null;
	for (a in area) {
	if (a === proselect) {
	citySel = area[a][0];
	var citAllStr = ``;
	for (const ac in area[a][0]) {
	citAllStr += `<li>${ac}</li>`
	}
	citList.innerHTML = citAllStr;
	}
	}
	// 城市列表点击事件
	citList.onclick = function () {

	areAll.style.display='block'
	offAll.style.display='none'

	citselect = event.target.innerHTML;
	var areAllStr = ``;
	for (let i = 0; i < citySel[citselect].length; i++) {
	for (key in citySel[citselect][i]) {
	areAllStr += `<li data-index=${i}>${key}</li>`
	}
	}
	areList.innerHTML = areAllStr;
	areList.onclick = function () {

	offAll.style.display='block'

	areselect = event.target.innerHTML
	var index = event.target.dataset.index;
	var a = citySel[citselect][index][areselect]
	var b = a.split('、')
	var offAllStr = ``;
	for(let i=0;i<b.length;i++){
	offAllStr+=`<li>${b[i]}</li>`
	}
	offList.innerHTML=offAllStr;
	offList.οnclick=function(){
	offselect=event.target.innerHTML
	adrAll.style.display='none'
	mask.style.display='none'
	document.querySelector('.pro').innerHTML=proselect
	document.querySelector('.cit').innerHTML=citselect
	document.querySelector('.are').innerHTML=areselect
	document.querySelector('.off').innerHTML=offselect
	}
	}
	}
	}
	</script>
	</body>

	</html>