利用 jQuery实现省市县三级联动

在没有接触jQuery之前，写三级联动菜单都是利用原生JavaScript来实现。在接触jQuery之后，感觉上比JavaScript使用起来更加方便。
在写demo过程中又接触到了三级联动菜单，换用jQuery来写三级联动。
本篇文章中的数据没有使用Ajax,数据不是从数据库动态读取的。只是尝试用jQuery来改变以前用原生JS写三级联动的方法。

省市县的数据用三维数组创建，定义一个JS文件来存放。由于数据量较大，此处不做展示。文件名为 ProvinceCity.js。
页面元素中设置一个div,id为test，用于获取存放元素的一个盒子。所有的select标签都由JQuery插入文本元素生成。
页面引入JQuery文件和设置div

<style>
	#test select{
		width:100px;
		margin-left:20px;
	}
  </style>

  <script>
	$(function(){
		$("#test").ProvinceCity();
	});
  </script>
  <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
  <script src="jquery.ProvinceCity.js" type="text/javascript"></script>
  <script src="provincesdata.js" type="text/javascript"></script>

设置jQuery文件，主要利用append插入select标签，获取省级菜单数据创建和插入option标签，通过首次获取的省级数据的下标确定二级菜单数据，再次创建插入option。这样就完成了二级联动。再次获取上一级数据的下标，确定三级数据。

代码如下：

$.fn.ProvinceCity = function(){
	var _self = this;
	//定义3个默认值
	_self.data("province",["请选择", "请选择"]);
	_self.data("city1",["请选择", "请选择"]);
	_self.data("city2",["请选择", "请选择"]);
	//插入3个空的下拉框
	_self.append("<select></select>");
	_self.append("<select></select>");
	_self.append("<select></select>");
	//分别获取3个下拉框
	var $sel1 = _self.find("select").eq(0);
	var $sel2 = _self.find("select").eq(1);
	var $sel3 = _self.find("select").eq(2);
	//默认省级下拉
	if(_self.data("province")){
		$sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
	}
	$.each( GP , function(index,data){
		$sel1.append("<option value='"+data+"'>"+data+"</option>");
	});
	//默认的1级城市下拉
	if(_self.data("city1")){
		$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
	}
	//默认的2级城市下拉
	if(_self.data("city2")){
		$sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
	}
	//省级联动 控制
	var index1 = "" ;
	$sel1.change(function(){
		//清空其它2个下拉框
		$sel2[0].options.length=0;
		$sel3[0].options.length=0;
		index1 = this.selectedIndex;
		if(index1==0){	//当选择的为 “请选择” 时
			if(_self.data("city1")){
				$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
			}
			if(_self.data("city2")){
				$sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
			}
		}else{
			$.each( GT[index1-1] , function(index,data){
				$sel2.append("<option value='"+data+"'>"+data+"</option>");
			});
			$.each( GC[index1-1][0] , function(index,data){
				$sel3.append("<option value='"+data+"'>"+data+"</option>");
			})
		}
	}).change();
	//1级城市联动 控制
	var index2 = "" ;
	$sel2.change(function(){
		$sel3[0].options.length=0;
		index2 = this.selectedIndex;
		$.each( GC[index1-1][index2] , function(index,data){
			$sel3.append("<option value='"+data+"'>"+data+"</option>");
		})
	});
	return _self;
};

完成效果如下：