三级联动的省市县下拉菜单

最新推荐文章于 2025-07-11 16:14:12 发布

原创最新推荐文章于 2025-07-11 16:14:12 发布 · 803 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #二维数组

web前端专栏收录该内容

2 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动的省市县下拉菜单</title>
<script>
        window.onload = selectPro;
		
		//定义一个作为全局变量的二维数组，结构为：id，名字，父id
		var arr = new Array ( );
		arr[arr.length] = [1,'北京市',null];
		arr[arr.length] = [2,'四川省',null];
		arr[arr.length] = [3,'广东省',null];
		arr[arr.length] = [4,'北京市',1];
		arr[arr.length] = [5,'成都市',2];
		arr[arr.length] = [6,'广州市',3];
		arr[arr.length] = [7,'深圳市',3];
		arr[arr.length] = [8,'武侯区',5];
		arr[arr.length] = [9,'青羊区',5];
		arr[arr.length] = [10,'白云区',6];
		arr[arr.length] = [11,'增城市',6];
		arr[arr.length] = [12,'从化市',6];
		
		function selectPro(){
			var province = document.getElementById("province");
			province.innerHTML ="";
			var proStr = '<option value="">--请选择--</option>';
			for (var i=0; i<arr.length; i++){
				var it = arr[i];
				if (it[2] == null){
					proStr += '<option value='+it[0]+'>'+it[1]+'</option>';
				}
			}
			province.innerHTML = proStr;
			province.onchange = selectCity;
			}
		
		function selectCity( ){
			var currProId = document.getElementById("province").value;
			if (currProId ==''){ return false;}
			var city = document.getElementById("city");
			city.innerHTML = "";
			var cityStr = '<option value="">--请选择--</option>';
			for (var i=0; i<arr.length; i++){
				var it = arr[i];
				if(currProId == it[2]){
					cityStr += '<option value='+it[0]+'>'+it[1]+'</option>';
				}
			}
			city.innerHTML = cityStr;
			city.onchange = selectArea;
		}
		
		function selectArea ( ){
			var currCityId = document.getElementById("city").value;
			if(currCityId ==''){  return false; }
			var area = document.getElementById("area");
			area.innerHTML = "";
			var areaStr ='<option value="">--请选择--</option>';
			for (var i=0; i<arr.length; i++){
				var it = arr[i];
				if (currCityId == it[2]){
					areaStr += '<option value='+it[0]+'>'+it[1]+'</option>';
				}
			}
			area.innerHTML = areaStr;
		}
</script>
</head>

<body style="text-align:center">
        省份：<select id="province"></select><br>
        城市：<select id="city"></select><br>
        区县：<select id="area"></select>
</body>
</html>