Js省市级联动案例

最新推荐文章于 2024-11-12 21:14:07 发布

我们一起走过的岁月

最新推荐文章于 2024-11-12 21:14:07 发布

阅读量486

点赞数

文章标签： java

本文链接：https://blog.csdn.net/HeDashuaithan/article/details/111655498

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市级联动案例</title>
	</head>
	<body>
		<!-- 页面中有两个下拉框，分别为省份、城市、区县、用户选择某个省份，对应城市下拉框重要出现所有该省份的城市，选择城市后出来对应该城市的区或县 -->
	<select onchange="getIndex(this)">
		<option>请选择省份</option>
	</select>
	
	<select onchange="areaMethod(this)">
		<option>请选择城市</option>
	</select>
	<select>
		<option>请选择区县</option>
	</select>
	<script>
		 /*
				显示所有的省份
				1.从后台获取到所有的省份数据容器--省份数组
						a、定义省份数组
				2.将数组中的省份信息添加到省份的下拉框中
						a、遍历省份数组，获取到每一个省份的信息
						b、将每一个省份信息添加到下拉框中
								创建一个option标签，进行赋值
		 */
		let proIndex=0;
		
		let selNodes=document.getElementsByTagName("select");
		let proArr=["河南省","湖南省"];
		 // function createMethod(){
			for(let x=0;x<proArr.length;x++){
				// 创建option标签
				let optNode=document.createElement("option");
				// 给option标签赋值
				optNode.innerHTML=proArr[x];
				// 将创建好的option标签添加到省份的下拉框
				selNodes[0].appendChild(optNode);
			}
		 // }
		
		// 城市下拉框操作
		let cityArr=[
			["--请选择城市--"],
			["郑州市","开封市","洛阳市"],
			["长沙市","湘潭市"]
			
		];
		//遍历城市数组，将城市信息添加到城市下拉框中(根据选择的省份确定要添加的城市数组)
		function getIndex(obj){
			// 先清空之前的数据
			selNodes[1].length=0;
			// 先获取到用户选择的省份--通过下标来获取
			proIndex=obj.selectedIndex;
			// 对应的具体城市数组
			let citys=cityArr[proIndex];
			console.log(proIndex);
			for(let x=0;x<citys.length;x++){
				// 创建option标签
				let optNode=document.createElement("option");
				// 给option标签赋值
				optNode.innerHTML=citys[x];
				// 将创建好的option标签添加到省份的下拉框
				selNodes[1].appendChild(optNode);
				
			}
			
		}
		let area=[
			[
				["--请选择区县--"]
			],
			[
				["金水区","高新区","二七区","管城区","郑东新区","惠济区"],
				["龙亭区","顺河回族区","鼓楼区"],
				["老城区","西厂区","吉利区"]
			],
			[
				["芙蓉区","天心区","开福区"],
				["雨湖区","岳塘区"]
			]
		];
		// 遍历区域数组，将区域添加到区域下拉框中(根据选择的城市确定要添加的区域数组)
		function areaMethod(a){
			selNodes[2].length=0;
			// 先获取到用户选择的城市--通过下标来获取
			let index=a.selectedIndex;
			// 对应的具体的区县数组
			let areas=area[proIndex][index];
			console.log(proIndex,index);
			for(let x=0;x<areas.length;x++){
				// 创建option标签
				let optNode=document.createElement("option");
				// 给option标签赋值
				optNode.innerHTML=areas[x];
				// 将创建好的option标签添加到城市的下拉框
				selNodes[2].appendChild(optNode);
			}
		}
	</script>
	</body>
</html>