現居住地：
		<select id="selProvince" onchange="changeCity( )" style="width:100px">
			<option>--選擇省份--</option>
		</select>
		<select id="selCity" style="width:100px">
			<option>--選擇城市--</option>
		</select>

現在需要利用JS實現在選擇省份的時候，相應的在城市裡面新增省份內的城市，首先利用新增節點的方法來實現這一功能，具體程式碼如下：

    function addProvince() {
			var province = document.getElementById("selProvince");
			province.add(new Option("北京市", "北京市", null));
			province.add(new Option("上海市", "上海市", null));
			province.add(new Option("河南省", "河南省", null));
		}

		function changeCity() {
			var province = document.getElementById("selProvince").value;
			var city = document.getElementById("selCity");
			city.innerHTML = "";//先清空再賦值
			switch(province) {
				case "北京市":
					city.add(new Option("--選擇城市--"));
					city.add(new Option("朝陽區", "朝陽區"), null);
					city.add(new Option("東城區", "東城區"), null);
					city.add(new Option("海淀區", "海淀區"), null);
					break;
				case "上海市":
					city.add(new Option("--選擇城市--"));
					city.add(new Option("寶山區", "寶山區"), null);
					city.add(new Option("長寧區", "長寧區"), null);
					city.add(new Option("豐賢區", "豐賢區"), null);
					break;
				case "河南省":
					city.add(new Option("--選擇城市--"));
					city.add(new Option("鄭州市", "鄭州市"), null);
					city.add(new Option("洛陽市", "洛陽市"), null);
					city.add(new Option("安陽市", "安陽市"), null);
					break;
				default:
					city.add(new Option("--選擇城市--"));
			}
		}
		window.onload(addProvince());
 

下面附上程式碼執行的效果圖：

在利用節點進行新增省市級聯的時候，我們會發現節點越多的話，那麼新增起來就會越來越麻煩，為了使這個麻煩減少一點點，現在，我們來利用JavaScript裡面的Array陣列，使用它來儲存省市級聯的資訊，再利用for查詢找到相應的位置進行新增節點，這樣將會使程式碼變得簡潔很多，具體程式碼如下：

                var cityList = new Array();
		cityList['北京市'] = ['朝陽區', '東城區', '西城區', '海淀區', '宣武區', '豐臺區', '懷柔', '延慶', '房山'];
		cityList['上海市'] = ['寶山區', '長寧區', '豐賢區', '虹口區', '黃浦區', '青浦區', '南匯區', '徐彙區', '盧灣區'];
		cityList['廣州省'] = ['廣州市', '惠州市', '汕頭市', '珠海市', '佛山市', '中山市', '東莞市'];
		cityList['深圳市'] = ['福田區', '羅湖區', '鹽田區', '寶安區', '龍崗區', '南山區', '深圳周邊'];
		cityList['重慶市'] = ['俞中區', '南岸區', '江北區', '沙坪壩區', '九龍坡區', '渝北區', '大渡口區', '北碚區'];
		cityList['天津市'] = ['和平區', '河西區', '南開區', '河北區', '河東區', '紅橋區', '塘古區', '開發區'];
		cityList['江蘇省'] = ['南京市', '蘇州市', '無錫市'];
		cityList['浙江省'] = ['杭州市', '寧波市', '溫州市'];
		cityList['四川省'] = ['四川省', '成都市'];
		cityList['海南省'] = ['海口市'];
		cityList['福建省'] = ['福州市', '廈門市', '泉州市', '漳州市'];
		cityList['山東省'] = ['濟南市', '青島市', '煙臺市'];
		cityList['江西省'] = ['江西省', '南昌市'];
		cityList['廣西省'] = ['柳州市', '南寧市'];
		cityList['安徽省'] = ['安徽省', '合肥市'];
		cityList['河北省'] = ['邯鄲市', '石家莊市'];
		cityList['河南省'] = ['鄭州市', '洛陽市'];
		cityList['湖北省'] = ['武漢市', '宜昌市'];
		cityList['湖南省'] = ['湖南省', '長沙市'];
		cityList['陝西省'] = ['陝西省', '西安市'];
		cityList['山西省'] = ['山西省', '太原市'];
		cityList['黑龍江省'] = ['黑龍江省', '哈爾濱市'];
		cityList['其他'] = ['其他'];
		
            //選擇省份以後，在城市下拉框中新增對應的城市
		function changeCity(){
			var province = document.getElementById("selProvince").value;
			var city = document.getElementById("selCity");
			city.innerHTML = "";//先清空再賦值
			for (var i in cityList) {
				if(i==province){
					city.add(new Option("--選擇省份--"));
					for(var j in cityList[i]){
						city.add(new Option(cityList[i][j],cityList[i][j],null));
					}
				}
			}
		}
		
            //載入頁面時候新增省份下拉框裡面的資訊
		function addProvince(){
			var province = document.getElementById("selProvince");
			for (var i in cityList) {
				province.add(new Option(i,i,null));
			}
		}
		window.onload(addProvince());
 

通過上面兩段程式碼的對比，我們可以看到利用了Array陣列以後，整體程式碼變得輕便很多，看起來沒有通過節點新增那麼多的冗餘感，下面附上程式碼執行的效果圖：