js省市区三级联动

最新推荐文章于 2023-09-23 13:15:52 发布

在下，杨江河

最新推荐文章于 2023-09-23 13:15:52 发布

阅读量151

点赞数

分类专栏： Mac开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128637947

版权

Mac开发专栏收录该内容

294 篇文章 2 订阅

订阅专栏

描述

js省市区三级联动

代码

var province_arr=["安徽", "北京", "福建", "甘肃", "广东"];

var  city_arr  = [
			[ "安庆市", "蚌埠市", "巢湖市" ] ,
			[ "北京市"] ,
			[ "福州市", "龙岩市", "南平市", "宁德市" ] ,
			[ "白银市", "定西市", "甘南藏族自治州市"] , 
			[ "潮州市", "佛山市"]
		];
		
var  area_arr = [
			[
				[ "安庆市", "怀宁县", "潜山县", "宿松县", "太湖县", "桐城市"] , 
				[ "蚌埠市", "固镇县", "怀远县", "五河县"] ,
				[ "巢湖市", "含山县", "和县", "庐江县", "无为县"] 
			],
			[
				[ "密云县", "延庆县"]
			],
			[
				[ "长乐市", "福清市", "福州市", "连江县"] , 
				[ "龙岩市", "长汀县", "连城县"] ,
				[ "光泽县", "建阳市", "建瓯市", "南平市", "浦城县", "邵武市"] ,
				[ "古田县", "宁德市", "屏南县", "寿宁县"]
			],
			[
				[ "白银市", "会宁县", "景泰县", "靖远县"] , 
				[ "定西县", "临洮县", "陇西县", "通渭县", "渭源县", "漳县", "岷县"] ,
				[ "迭部县", "合作市", "临潭县", "碌曲县", "玛曲县", "夏河县", "舟曲县", "卓尼县"] 
			],
			[
				["潮安县", "潮州市", "饶平县"] , 
				["佛山市"] 
			]			

		];
		
window.onload=function(){
	for(var i=0;i < province_arr.length ; i++){
		//创建option
		var option = document.createElement("option");
		option.value = i;
		option.innerHTML=province_arr[i];
		document.getElementById("province").appendChild(option);
	}
}

function changeProvince(obj){
	var pid = obj.value;
	var citys = city_arr[pid];
	document.getElementById("city").options.length=0;
	for(var i = 0 ;i < citys.length;i++){
		var option = document.createElement("option");
		option.value = i;
		option.innerHTML=citys[i];
		document.getElementById("city").appendChild(option);
	}
	
}

function changeCity(obj){
	var cid = obj.value;
	var pid = document.getElementById("province").value;
	var areas = area_arr[pid][cid];
	document.getElementById("area").options.length=0;
	for(var i=0;i<areas.length;i++){
		var option = document.createElement("option");
		option.value = i;
		option.innerHTML=areas[i];
		document.getElementById("area").appendChild(option);
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/index5.js"></script>
	</head>
	<body>
		<select onchange="changeProvince(this)" id="province">
			<option value="0">请选择</option>
		</select>
		<select onchange="changeCity(this)" id="city">
			
		</select>
		<select id="area">
			
		</select>
	</body>
</html>