省市级联案例

最新推荐文章于 2022-11-19 23:13:54 发布

LUCK.Y-ZT

最新推荐文章于 2022-11-19 23:13:54 发布

阅读量278

点赞数

文章标签： java js

本文链接：https://blog.youkuaiyun.com/qq_52232797/article/details/111597554

版权

该博客详细介绍了使用Java和JavaScript实现省市区级联的思路和具体代码实现，包括后台数据处理和前端展示的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

省市级联案例

1.思路：

			显示所有的省份
			1.从后台获取到所有的省份数据容器--省份数组
				a、定义省份数组
			2.将数组中的省份信息添加到省份的下拉框中
				a、遍历省份数组，获取到每一个省份的信息
				b、将每一个省份信息添加到下拉框中
					创建一个option标签，进行赋值

2.代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			页面中有两个下拉框，分别为省份、城市，用户选择某个省份，对应城市下拉框重要出现所有该省份的城市
		 -->
		 
		 <select onchange="getIndex(this)">
			<option>--请选择省份--</option>
		 </select>
		 
		 <select onchange="getCityIndex(this)">
			<option>--请选择城市--</option>
		 </select>
		 
		 <select>
			<option>--请选择区县--</option>
		 </select>
		 
		 <script type="text/javascript">
		 
		   let selNodes = document.getElementsByTagName("select");
		   let proArr = ["河南省","湖南省"];
		   createMethod(proArr,0);
		   
		   //城市下拉框操作
		   let cityArr = [
			   ["--请选择城市--"],
			   ["郑州市","开封市","洛阳市"],
			   ["长沙市","湘潭市"]
		   ];
		   
		   let areaArr = [
			   [
				   ["--请选择区县--"]
			   ],
			   [
				   ["二七区","高新区"],
				   ["金明区","鼓楼区"],
				   ["老城区","西厂区"]
			   ],
			   [
				   ["芙蓉区","天心区"],
				   ["雨湖区","月塘区"]
			   ]
		   ];
		   
		   //省份下标
		   let proIndex = 0;
		   //遍历城市数组，将城市信息添加到城市下拉框中（根据选择的省份确定要添加的城市数组）
		   function getIndex(obj){
			   //先清空之前的数据
			   selNodes[1].length = 0;
			   //先获取到用户选择的省份--通过下标来获取
			   proIndex = obj.selectedIndex;
			   //对应的具体城市数组
			   let citys = cityArr[proIndex];
			   createMethod(citys,1);
			   defaultArea(areaArr[proIndex][0],2)
		   }
		   
		   //城市改变的函数
		   function getCityIndex(obj){
			   selNodes[2].length = 0;
			   //获取城市下标
			   let cityIndex = obj.selectedIndex;
			   //获取城市对应的区县数组
			   let areas = areaArr[proIndex][cityIndex];
			    createMethod(areas,2);
		   }
		   
		   function defaultArea(areas,index){
			   selNodes[index].length = 0;
			   createMethod(areas,index);
		   }
		   
		   function createMethod(arr,index){
			   for(let x=0;x<arr.length;x++){
				   //创建option标签
				   let optNode = document.createElement("option");
				   //给option标签赋值
				   optNode.innerHTML = arr[x];
				   //将创建好的option标签添加到省份的下拉框
				   selNodes[index].appendChild(optNode);
			   }
		   }
		 </script>
	</body>
</html>