前端基础 - JQuery实现省级联动

JQuery实现省级联动

效果图：

代码：

	
		
		
		
			// 定义二维数组:
			var arr = new Array(4);
			arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
			arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
			arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
			arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
		
	
	

	
		$(function() {
			//获取省份对象  派发change事件
			$("#pro").change(function() {

				//清空市的下拉选中的内容
				//$("#city").empty();
				$("#city").html("");

				//获取省份的value值
				var $flag = $(this).val();

				//通过value值获取对应省份的市的数组
				var cityArrObj = arr[$flag];

				//遍历市的数组
				$(cityArrObj).each(function() {
					//把遍历后的市  添加到市的下拉选中
					//html的方式会覆盖
					//$("#city").html(""+this+"");
					//文档操作的时候是追加
					$("#city").append("" + this + "");
				})
			})
		});
	

	
		
			
				-请选择-
				黑龙江
				吉林
				辽宁
				河南
			
			
				-请选择-