現居住地：<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數組以后，整體代碼變得輕便很多，看起來沒有通過節點添加那么多的冗余感，下面附上代碼執行的效果圖：

利用Array數組添加節點 利用Array數組添加節點

?

總結

以上是生活随笔為你收集整理的JS实现省市级联的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。