js 省份城市 二级联动

 

<!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>

 

版本:v1.2 ----------------------------------------------- (C) Oran Day(likecode#gmail.com) ----------------------------------------------- ----------------------------------------------- 文件夹说明: - ChinaRegions_Complained 已编译后的dll - ChinaRegions_Source - 服务器控件源码项目 - html - 演示代码级源测试代码 ----------------------------------------------- ----------------------------------------------- ChinaRegion 文件名:OranChinaRegion.dll 自我说明XML:OranChinaRegion.XML 描述: 中国行政区域二级联系菜单,根据上级行政区加载下级行政区列表 XML数据驱动,可自定义添加、删除,简易更新 支持回发恢复状态,已正确设定行政区可自动选定和加载各级行政区数据 其它说明: 应用网站必须存在行政区域的数据XML文件,默认放于应用页面同级目录的oran/regions下,其中regions.xml为一级行政区数据,其它均为二级行政区数据 可自定义修改XML目录,在web.config/appSettings/ChinaRegionXmlFolderPath 配置,e.g.:/oran/regions 创建实例至少指定 runat 和 ID 属性。 应用: 1.为网站添加DLL引用 引用OranChinaRegion.dll 2.复制XML文件至网站 3.注册控件 e.g.: 4.在您期望的位置插入该控件, e.g.: 5.获取值 ParentRegion 获取或设置一级行政区 ChildRegion 获取或设置二级行政区 e.g: string parRgn = region1.ParentRegion; if (parRgn.Length > 0) Response.Write("您选择的是:" + parRgn); string chdRgn = region1.ChildRegion; if (chdRgn.Length > 0) Response.Write(" - " + chdRgn); 6.减少网络传输量,提高网络传输效率,您可以将XML压缩再应用于实际网站。 7.更多参数请参考自我说明XML。 8.期待您报告BUG:)。 -----------------------------------------------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值