JS省市联动

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			var shi=new Array(4);
			shi[0]=new Array("宁波","杭州","嘉兴");
			shi[1]=new Array("福州","厦门","莆田");
			shi[2]=new Array("苏州","南京","常州");
			shi[3]=new Array("合肥","安庆","芜湖");
			
			for(var a=0;a<arr.length;a++){
				for(var b=0;b<arr[a].length;b++){
					
				}
			}
			
			function load(){
				//获取select标签
				var sheng=	document.getElementById("sheng");
				//动态绑定选择事件到change函数
				sheng.onchange=change;
			}
			
			//当下拉框选择后,调用函数
			function change(){
				//每次选择事件调用函数时,都清空一下select(id=shi)的内容
				document.getElementById("shi").innerHTML="<option>请选择市</option>";
				
				//这里的this就是上面调用的对象,sheng
				//上面的集合shi下标=省option的value,这样选到省就选到集合shi
				var s=shi[this.value];
				//遍历s中的集合
				for(var a=0;a<s.length;a++){
					//取出一个s[a],把他放入option内容中
					//在市标签中,创建option标签<option></option>
					var opelement=document.createElement("option");
					//给option标签添加内容
					var text=document.createTextNode(s[a]);
					//把text添加到opelement
					opelement.appendChild(text);
					//最后把创建的opelement添加到select(id=shi)中
					document.getElementById("shi").appendChild(opelement);
				}
				

				
			}
			
		</script>
	</head>
	<body "load()">
		
		<select id="sheng">
			<option>请选择省</option>
			<option value="0">浙江</option>
			<option value="1">福建</option>
			<option value="2">江苏</option>
			<option value="3">安徽</option>
		</select>
		
		<select id="shi">
			<option>请选择市</option>
		</select>

	</body>
</html>
猜你喜欢
