超简单的省市县三级联动

最新推荐文章于 2025-04-18 19:35:56 发布

DaMeng1219

最新推荐文章于 2025-04-18 19:35:56 发布

阅读量709

点赞数

文章标签：省市县三级联动

本文链接：https://blog.youkuaiyun.com/DaMeng1219/article/details/100526393

版权

超简单的省市县三级联动

省市县js文件链接：https://blog.youkuaiyun.com/DaMeng1219/article/details/100526328

代码详情：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{

				margin:0;
				padding:0;
				top: 0px;
				right: 0;
				bottom: 0;
				left: 0;
				
			}
			select{
				width: 200px;
				height: 50px;
				font-size: 20px;
				font-weight: 400;
				color: #808080;
				background:url(../img/10.jpg);
				background-repeat: round;
				
			}
		</style>
	</head>
	<body onload="load()">
		<select id="province"  onchange="getCity(this)">
			<option>请选择省份</option>
		</select>
		<select name="" id="city" onchange="getArea(this)">
			<option value="">请选择城市</option>
		</select>
		<select name="" id="area" >
			<option value="">请选择区县</option>
		</select>
		<script type="text/javascript" src="infos.js" ></script>
		<script>
			var pro = document.getElementById("province");
			function getPro(){
				for(var i=0;i<infos.length;i++){
//					console.log(infos[i].code+"--"+infos[i].name);
					pro.innerHTML+="<option value='"+infos[i].code+"'>"+infos[i].name+"</option>";
				};
			};
			var cities = [];
			var city = document.getElementById("city");
			function getCity(t){
//				console.log(t.value);
				var proID = t.value;
				area.innerHTML="<option>请选择县区</option>";
				city.innerHTML="<option>请选择城市</option>";
				for(var i=0;i<infos.length;i++){
					if(proID==infos[i].code){
						cities = infos[i].city;
						//遍历city
						for(var j=0;j<cities.length;j++){
							city.innerHTML+="<option value='"+cities[j].code+"'>"+cities[j].name+"</option>";
						}
						break;
					}
				};
			}
			var area = document.getElementById("area");
			function getArea(t){
				var areaID = t.value;
				area.innerHTML="<option>请选择县区</option>";
				for(var j=0;j<cities.length;j++){
					if (areaID==cities[j].code){
						for (var k=0;k<cities[j].area.length;k++){
							area.innerHTML+="<option value='"+cities[j].area[k].code+"'>"+cities[j].area[k].name+"</option>";
						}
						break;
					}
				};	
			}	
			//页面加载完成
			window.onload=function(){
				getPro();
			};
		</script>
	</body>
</html>

运行结果：

在这里插入图片描述