javascript實現簡單的省市區三級聯動

最後更新：2015-05-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　本文給大家反映的是javascript實現的簡單的省市區三級聯動特效，不需要訪問後台伺服器端，不使用Ajax，無重新整理，純JS實現的省市區三級聯動。當省市區資料變動是只需調正js即可。

　　當我們註冊一個網站，會看到省市區三級聯動，下面簡單介紹一下

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

</select>

</select>

</select>

</body>

//======================================第一種方法：擷取省市二串聯功能表=============================

//擷取省的id

var prame= document.getElementById("province");

var city= document.getElementById("city");

var san= document.getElementById("san");

//建立省市數組

var cityList=new Array();

//建立另一個數組

var zushu=new Array;

cityList['江西省'] = ['南昌市','撫州市','上饒市','鷹潭市','豐城市','吉安市'];

cityList['河南省'] = ['鄭州市','洛陽市'];

cityList['湖北省'] = ['武漢市','宜昌市'];

cityList['福建省'] = ['福州市','三明市','佛山市'];

zushu['南昌市']=['南昌縣','青雲譜區','蓮塘鎮'];

zushu['撫州市']=['臨川區','雲山鎮','唱凱鎮'];

for(var i in cityList){

prame.add(new Option(i,i),null);

}

prame.onchange=function(){

var prame= document.getElementById("province").value;

var city= document.getElementById("city");

city.options.length=0;

for(var k in cityList[prame]){

city.add(new Option(cityList[prame][k],cityList[prame][k]),null);

}

city.onchange=function(){

var city= document.getElementById("city").value;

var san= document.getElementById("san");

san.options.length=0;

for(var k in zushu[city]){

san.add(new Option(zushu[city][k]),(zushu[city][k]),null);

}

</script>

<!--------------------------------第二種方法：三級聯動菜單----------------------

//擷取省的id

var province=document.getElementById("province");

province.add(new Option("江西省","江西省"),null);

province.add(new Option("福建省","福建省"),null);

province.add(new Option("廣東省","廣東省"),null);

function ck(){

var city=document.getElementById("city");

var num=province.selectedIndex;

city.options.length=0;

switch(num){

case 1:

city.add(new Option("南昌市","南昌市"),null);

city.add(new Option("撫州市","撫州市"),null);

city.add(new Option("上饒市","上饒市"),null);

city.add(new Option("吉安市","吉安市"),null);

break;

case 2:

city.add(new Option("廈門市","廈門市"),null);

city.add(new Option("三明市","三明市"),null);

city.add(new Option("莆田市","莆田市"),null);

city.add(new Option("龍岩市","龍岩市"),null);

break;

case 3:

city.add(new Option("廣州市","廣州市"),null);

city.add(new Option("東莞市","東莞市"),null);

city.add(new Option("保定市","保定市"),null);

city.add(new Option("珠海市","珠海市"),null);

break;

}

var qu=document.getElementById("qu");

var num1=province.selectedIndex;

qu.options.length=0;

switch(num1){

case 1:

qu.add(new Option("臨川區","臨川區"),null);

qu.add(new Option("青雲譜區","青雲譜區"),null);

qu.add(new Option("南昌鎮","南昌鎮"),null);

qu.add(new Option("雲山鎮","雲山鎮"),null);

break;

case 2:

qu.add(new Option("保安縣","保安縣"),null);

qu.add(new Option("福田區","福田區"),null);

qu.add(new Option("將樂縣","將樂縣"),null);

qu.add(new Option("廈門區","廈門區"),null);

break;

case 3:

qu.add(new Option("廣上縣","光上縣"),null);

qu.add(new Option("西莞區","西莞區"),null);

qu.add(new Option("三海縣","三海縣"),null);

qu.add(new Option("廣島區","廣島區"),null);

break;

}

</script>-->

</html>

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript實現簡單的省市區三級聯動

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support