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>