JS 實現地區，省份，城市，縣區4級聯動

最後更新：2013-11-22 來源：互聯網

上載者：User

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

剛學JS，實戰一下，做一個省份資訊4級聯動。

但是網上查了都是3級的，沒有4級，現在做一個的是帶地區的4級聯動，最簡單的辦法是修改別人的代碼，最開始找到的事類似於下邊這個的：

 省市縣關聯菜單                   <html> <head> <title>省市縣關聯菜單</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <SCRIPT LANGUAGE="JavaScript"> <!-- function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof this.Items[id] == "undefined") return false; return true; } function change(v){ var str="0"; for(i=0;i<v;i++){str+=("_"+(document.getElementById(s[i]).selectedIndex-1));} var ss=document.getElementById(s[v]); with(ss){ length = 0; options[0]=new Option(opt0[v],opt0[v]); if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v) { if(dsy.Exists(str)){ ar = dsy.Items[str]; for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]); if(v)options[1].selected = true; } } if(++v<s.length){change(v);} } } var dsy = new Dsy(); {dsy.add("0",["華東地區","華南地區","華中地區","華北地區","西北地區","西南地區","東北地區","台港澳地區"]);dsy.add("0_0",["山東","江蘇","安徽","浙江","福建","上海"]);dsy.add("0_0_0",["濱州","德州","東營","菏澤","濟南","濟寧","萊蕪","聊城","臨沂","青島","日照","泰安","威海","濰坊","煙台","棗莊","淄博"]);dsy.add("0_0_0_0",["濱州市","博興縣","惠民縣","無棣縣","陽信縣","沾化縣","鄒平縣"]); dsy.add("0_0_0_1",["德州市","樂陵市","臨邑縣","陵縣","寧津縣","平原縣","齊河縣","慶雲縣","武城縣","夏津縣","禹城市"]); dsy.add("0_0_0_2",["東營市","廣饒縣","墾利縣","利津縣"]); dsy.add("0_0      ......省略掉資料（要不太多了）}//--> </SCRIPT> <SCRIPT LANGUAGE = JavaScript> <!-- //** Power by Fason(2004-3-11) //** Email:fason_pfx@hotmail.com var s=["s0","s1","s2","s3"]; var opt0 = ["地區","省份","地級市","市、縣級市、縣"]; function setup() { for(i=0;i<s.length-1;i++) document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); change(0); } //--> </SCRIPT> </head> <body  onload="setup()"> 多級關聯菜單： <form name="frm"><select id="s0"><option>地區</option></select><select id="s1"><option>省份</option></select> <select id="s2"><option>地級市</option></select> <select id="s3"><option>市、縣級市、縣</option></select> </form> </body> </html>

雖然原理是看懂了，修改為4級地區聯動探索資料有問題，只有縣級，連區沒有。好吧，這個是在百度文庫裡找的，標題是最詳細的省市縣3級聯動。。。然後，改完之後發現被坑了。沒辦法啊，重新找吧，然後就找到了還算是基本比較全的資料，然後就開始改了：

下面這個是按照地區劃分的區所做的4級聯動修改：

HTML代碼如下：

<!DOCTYPE html><html><head>    <title>純JS省市區聯動</title>    <script type="text/javascript" src="jsAddress.js"></script></head><body><div>地區：<select id="area"></select>省：<select id="cmbProvince"></select>市：<select id="cmbCity"></select>區：<select id="cmbArea"></select><br /><br /><script type="text/javascript">addressInit('area','cmbProvince','cmbCity','cmbArea','西北地區', '北京', '市轄區', '東城區');//addressInit('Select1', 'Select2', 'Select3');</script></div></body></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