jquery实现简单的省市区三级联动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
			var arr_prevince = [
									"湖南",
									"广东",
									"北京"
								];
			var arr_city = [
								
								[
									"永州",
									"郴州",
									"长沙"
								],
								[
									"广州",
									"深圳"
								],
								[
									"朝阳区",
									"海澄区",
								]
							];
			var arr_area = [
								[
									["宁远县","蓝山县","新田县"],
									["嘉禾县","不知道"],
									["长沙县","星沙区"]
								],
								[
									["白云区","天河区","黄浦区"],
									["龙华","宝安"],
								],
								[
									["北京县","天安门"],
									["故宫","颐和园"],
								]
							]
			$(function(){
				//初始化添加省份
				for( var i = 0 ; i<arr_prevince.length; i++){
					$("#prevince").append("<option>" + arr_prevince[i] + "</option>");
				}
				
				//选择省份时触发事件
				$("#prevince").change(function(){
					//清除city和area下拉框的数据
					$("#city option").not(":eq(0)").remove();
					$("#area option").not(":eq(0)").remove();
					
					//得到被选中省份的下标
					var prevince_index = $("#prevince option:selected").index();
					//获得被选中省份下的城市
					var new_city = arr_city[prevince_index-1];
					//遍历添加城市
					for(var i = 0; i < new_city.length; i++){
						$("#city").append("<option>" + new_city[i] + "</option>")
					}
				});
				
				//
				$("#city").change(function(){
					//清除area下拉框的数据
					$("#area option").not(":eq(0)").remove();
					
					//得到被选中省份的下标
					var prevince_index = $("#prevince option:selected").index();
					//得到被选中城市的下标
					var city_index = $("#city option:selected").index();
					
					//获得被选中城市下的地区
					var new_area = arr_area[prevince_index-1][city_index-1];
					//遍历添加地区
					for(var i = 0; i < new_area.length; i++){
						$("#area").append("<option>" + new_area[i] + "</option>")
					}
					
				});
				
				

			})
	</script>
</head>
<body>
		<select id="prevince" >
			<option>--请选择--</option>
		</select>
		<select id="city" >
			<option>--请选择--</option>
		</select>
		<select id="area">
			<option>--请选择--</option>
		</select>
</body>
</html>
jquery实现简单的省市区三级联动

猜你喜欢
