js 省份城市二级联动

最新推荐文章于 2022-06-30 17:29:41 发布

人生海海丶

最新推荐文章于 2022-06-30 17:29:41 发布

阅读量836

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/stayreal_OA/article/details/98966502

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width:173px;
			}
		</style>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var province=[
							{proId:"sj",proName:"江苏"},
						 	{proId:"zj",proName:"浙江"},
						 	{proId:"ah",proName:"安徽"},
						 	{proId:"sh",proName:"上海"},
						 ];
						 
			var cities=[
							[{cityId:"wx",cityName:"无锡",postCode:"000001",areaCode:"001"},{cityId:"nj",cityName:"南京",postCode:"000002",areaCode:"002"},{cityId:"cz",cityName:"常州",postCode:"000003",areaCode:"003"},{cityId:"sz",cityName:"苏州",postCode:"000004",areaCode:"004"}],
						 	[{cityId:"jx",cityName:"嘉兴",postCode:"000005",areaCode:"005"},{cityId:"zs",cityName:"舟山",postCode:"000006",areaCode:"006"},{cityId:"hz",cityName:"杭州",postCode:"000007",areaCode:"007"},{cityId:"dq",cityName:"德清",postCode:"000008",areaCode:"008"}],
						 	[{cityId:"hf",cityName:"合肥",postCode:"000009",areaCode:"009"},{cityId:"mas",cityName:"马鞍山",postCode:"000010",areaCode:"010"},{cityId:"la",cityName:"六安",postCode:"000011",areaCode:"011"}],
						 	[{cityId:"hk",cityName:"虹口",postCode:"000011",areaCode:"011"},{cityId:"hp",cityName:"黄埔",postCode:"000012",areaCode:"012"},{cityId:"yp",cityName:"杨浦",postCode:"000013",areaCode:"013"},{cityId:"ja",cityName:"静安",postCode:"000014",areaCode:"014"}]
						 ];
			//页面初始化时，根据province数组动态添加option选项.
			
			//改变下拉框选项，触发onchange事件 加onchange
			/*function f1(){
				var pro = my("province").value;
				//console.log(pro);
				
				var index = my("province").selectedIndex;
				console.log(index);
			}*/
			
			//在onload事件中动态创建下拉框的选项
			window.onload=function(){
				var proObj = document.getElementById("province");
				//console.dir(proObj);
				//遍历数组
				for(var i=0;i<province.length;i++){
					var proInfo = province[i];
//					console.log(proInfo);
					//{proId: "sj", proName: "江苏"} 
					//创建option元素
					var optionObj = document.createElement("option");
//					console.dir(optionObj);
					optionObj.value=proInfo.proId;
					optionObj.innerHTML=proInfo.proName;
					//把option对象添加到下拉框对象中
					proObj.appendChild(optionObj);
					//console.dir(optionObj);
				}
				
				//给省份下拉框添加onchange事件
				proObj.onchange=getCityByProId;
				var cityObj = document.getElementById("city");
				//给城市下拉框添加onchange事件
				cityObj.onchange=getCityInfo;
			}
			
			
			function getCityByProId(){
				clearFix();
				var cityObj = document.getElementById("city");
				//清空城市下拉框选项
				cityObj.length=1;//选项留一个。
				var index = this.selectedIndex;
				if(index>0){
					index--;
					//根据下标来获取城市
					var cityData = cities[index];
					for(var i=0;i<cityData.length;i++){
						var cityInfo = cityData[i];
						var optionObj = document.createElement("option");
						optionObj.value=cityInfo.cityId;
						optionObj.innerHTML=cityInfo.cityName;
						cityObj.appendChild(optionObj);
					}
					
				}
			}
			
			function getCityInfo(){
				clearFix();
				var proObj = document.getElementById("province");
				var cityObj = document.getElementById("city");
				
				//取得省份的下标
				var i = proObj.selectedIndex;
				//取得城市的下标
				var j = cityObj.selectedIndex;
				if(i>0 && j>0){
					i--;
					j--;
					//清空城市下拉框选项
					//cities[i] 城市数组
					//cities[i][j]  城市对象。
					var cityInfo = cities[i][j];
					
					document.getElementById("postCode").value=cityInfo.postCode;
					document.getElementById("areaCode").value=cityInfo.areaCode;
				}
			}
			
			function clearFix(){
				document.getElementById("postCode").value="";
				document.getElementById("areaCode").value="";
			}
			
			
		</script>
		
	</head>
	<body>
		<h1>省份城市二级联动</h1>
		省份：
		<!--<select id="province" onchange="f1()">-->
		<select id="province">
			<option value="">请选择</option>
		</select><br/>
		城市：
		<select id="city">
			<option value="">请选择</option>
		</select><br/>
		邮编：
		<input type="text" id="postCode" /><br/>
		区号：
		<input type="text" id="areaCode" /><br/>
	</body>
</html>