分别使用js和JQuery实现省市二级联动

1.1html

js中this指的是当前操作的对象

<tr>
							<td>籍贯</td>
							<td><select onchange="changeCity(this.value)" id="province" >
									<option>--请选择--</option>
									<option value="0">江苏</option>
									<option value="1">湖北</option>
									<option value="2">河北</option>
									<option value="3">河南</option>
							</select> <select id="city">

							</select></td>
						</tr>

1.2js部分

 //1创建一个二维数组进行存储省份和城市
    var cities = new Array(3);
    cities[0] = new Array("徐州","南京","南通");
    cities[1] = new Array("1","2","3");
    cities[2] = new Array("4","5","6");
    cities[3] = new Array("7","8","9");
	function changeCity(val) {
		//8获取第二个下拉列表
		var cityE = document.getElementById("city");
		//9清空列表option
		cityE.options.length=0;
		//2遍历二维数组中的省份
		for(var i=0;i<cities.length;i++){
			if(val==i){
				//3遍历用户选择省份下面的城市
				for(var j=0;j<cities[i].length;j++){
					//alert(cities[i][j]);
					//4创建城市的文本节点
					var cityT = document.createTextNode(cities[i][j]);
					//5创建option元素节点
					var optionE = document.createElement("option");
					//6将城市文本节点添加到option元素节点
					optionE.appendChild(cityT);
					//7将option元素节点添加到第二个下拉列表中去
					cityE.appendChild(optionE);					
				}
			}
		}
	}

1.3JQuery部分 

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
		$(function(){
			//2创建二维数组用于存储省份和城市
			var cities = new Array(3);
		    cities[0] = new Array("徐州","南京","南通");
		    cities[1] = new Array("1","2","3");
		    cities[2] = new Array("4","5","6");
		    cities[3] = new Array("7","8","9");
		    //1获取用户选择的省份 
			$("#province").change(function(){
				var val = this.value;
				//10清空上一次循环的option节点
				$("#city").empty();
                //3遍历二维数组中的省份
                $.each(cities,function(i,n){
                	//4判断用户所选择的省份
                	if(val==i){
                		//5遍历所选省份下面的城市
                		$.each(cities[i],function(j,m){
                			//6创建城市文本节点
                			var cityNode = document.createTextNode(m);
                			//7创建option元素
                			var optE = document.createElement("option");
                			//8将城市追加到option元素里面
                			$(optE).append(cityNode);
                			//9将option元素追加到city里面
                			$(optE).appendTo($("#city"));
                		});
                	}
                });
			});
		});
		</script>