<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS 省市區三級聯動</title>
</head>
<body>
<select id="selProvince" name="province">
</select>
<select id="selCity" name="city">
</select>
<select id="selDist" name="area">
</select>
<div></div>
<script type="text/javascript">
var temp;
var P = new Array();
var C = new Array();
var D = new Array();
P = new Array("北京","上海","天津","重慶","廣東","四川","浙江","貴州","遼寧","江蘇","福建","河北","河南"," 吉林","黑龍江","山東","安徽","廣西","海南","內蒙古","山西","寧夏","甘肅","陜西","青海","湖北","湖南"," 江西","雲南","新疆","香港","澳門");
/*北京 */ C[0] = new Array("北京");
/*上海 */ C[1] = new Array("上海");
/*天津 */ C[2] = new Array("天津");
/*重慶 */ C[3] = new Array("重慶");
/*廣東 */ C[4] = new Array("廣州","深圳","珠海","佛山","惠州","東莞","中山","江門","湛江","汕頭");
/*四川 */ C[5] = new Array("成都","自貢市","攀枝花","瀘州");
/*浙江 */ C[6] = new Array("杭州","寧波","嘉興","紹興","溫州","金華","衢州","舟山","臺州","麗水","湖州");
/*貴州 */ C[7] = new Array("貴陽");
/*遼寧 */ C[8] = new Array("沈陽","大連");
/*江蘇 */ C[9] = new Array("南京","蘇州","南通","無錫","鹽城","徐州","常州","連雲港","常熟","揚州","鎮江","泰州","昆山","吳江");
/*福建 */C[10] = new Array("福州","廈門","泉州");
/*河北 */C[11] = new Array("石家莊","唐山","邯鄲","保定","廊坊","衡水","秦皇島");
/*河南 */C[12] = new Array("鄭州","洛陽");
/*吉林 */C[13] = new Array("長春","吉林");
/*黑龍江 */C[14] = new Array("哈爾濱");
/*山東 */C[15] = new Array("濟南","青島","威海","煙臺","濰坊","日照","臨沂","淄博");
/*安徽 */C[16] = new Array("合肥","蕪湖","馬鞍山");
/*廣西 */C[17] = new Array("南寧","桂林","北海","柳州");
/*海南 */C[18] = new Array("海南","三亞");
/*內蒙古 */C[19] = new Array("呼和浩特","包頭");
/*山西 */C[20] = new Array("太原");
/*寧夏 */C[21] = new Array("銀川");
/*甘肅 */C[22] = new Array("蘭州");
/*陜西 */C[23] = new Array("西安");
/*青海 */C[24] = new Array("西寧");
/*湖北 */C[25] = new Array("武漢","宜昌");
/*湖南 */C[26] = new Array("長沙","株洲","湘潭");
/*江西 */C[27] = new Array("南昌","贛州");
/*雲南 */C[28] = new Array("昆明");
/*新疆 */C[29] = new Array("烏魯木齊");
/*香港 */C[30] = new Array("香港");
/*澳門 */C[31] = new Array("澳門");
/*臺灣 */C[31] = new Array("臺北");
for(temp in C)
{
D[temp] = new Array();
}
/*北京 */D[0][0] = new Array("海澱區,朝陽區,東城區,西城區,崇文區,宣武區,豐臺區,石景山,房山區,門頭溝,通州區,順義區,昌平區,密雲區,懷柔區,延慶區,平谷區,大興區,燕郊區");
/*上海 */D[1][0] = new Array("黃浦區、盧灣區、徐匯區、徐家匯、長寧區、靜安區、普陀區、閘北區 虹口區、楊浦區、寶山區、閔行區、嘉定區、浦東新區、松江區、金山區、青浦區、南匯區、奉賢區、崇明縣");
/*天津 */D[2][0] = new Array("和平,西青,北辰,大港,南開,河東,河西,河北,津南,紅橋,塘沽,漢沽,東麗,寶坻,薊縣,武清,寧河,靜海,開發區");
/*重慶 */D[3][0] = new Array("南岸,渝北,萬盛,大渡口,萬州,北碚,沙坪壩,巴南,雙橋,涪陵,江北,九龍坡,渝中");
/*廣州 */D[4][0] = new Array("荔灣,越秀,東山,天河,海珠,黃埔,芳村,白雲,花都,番禺,東莞,廣州經濟技術開發區,從化,增城,蘿崗,清遠,南沙,佛山");
/*深圳 */D[4][1] = new Array("福田,羅湖,南山,鹽田,寶安,龍崗");
/*珠海 */D[4][2] = new Array("鬥門,橫琴,金灣,香洲,坦洲");
/*佛山 */D[4][3] = new Array("南海,順德,三水,高明,禪城");
/*惠州 */D[4][4] = new Array("博羅縣,大亞灣區,惠城區,惠東縣,惠陽區,龍門縣,仲愷區");
/*東莞 */D[4][5] = new Array("茶山,長安,常平,大朗,大嶺山,道?,東城,東坑,鳳崗,高?,莞城,洪梅,厚街,黃江,虎門,寮步,麻湧,南城,企石,橋頭,清溪,沙 田,石碣,石龍,石排,松山湖,塘廈,萬江,望牛墩,謝崗,樟木頭,中堂");
/*中山 */D[4][6] = new Array("東區,南區,西區,石岐區,南頭鎮,古鎮鎮,東鳳鎮,小欖鎮,黃圃鎮,三角鎮,民眾鎮,阜沙鎮,火炬區,港口鎮,東升鎮,橫欄鎮,沙溪鎮,大湧鎮,板芙鎮,五桂山鎮,南朗鎮,三鄉鎮,神灣鎮,坦洲鎮");
/*江門 */D[4][7] = new Array("新會區,蓬江區,江海區,臺山市,恩平市,鶴山市,開平市");
/*成都 */D[5][0] = new Array("青羊,錦江,金牛,武侯,成華,龍泉驛,青白江,高新區,金堂縣,新都區,溫江區,郫縣,雙流縣,新津縣,大邑縣,都江堰市,崇州市,邛崍市,蒲江縣,彭州市,高新西區,高新西區");
/*杭州 */D[6][0] = new Array("上城,下城,西湖,拱墅,江幹,濱江,余杭,蕭山,富陽,桐廬,臨安,淳安,建德");
/*寧波 */D[6][1] = new Array("海曙,江東,江北,鄞州,鎮海,北侖,慈溪,余姚,奉化,寧海,象山,高新區,東錢湖旅遊度假區");
/*嘉興 */D[6][2] = new Array("嘉善,平湖,海鹽,海寧,桐鄉,秀洲,南湖,市區,經濟開發區");
/*紹興 */D[6][3] = new Array("紹興縣,諸暨市,上虞市,新昌縣,越城區,嵊州市");
/*貴陽 */D[7][0] = new Array("雲巖,南明,金陽新區,小河,花溪,烏當,白雲,清鎮,開陽,修文,息烽,小河片,金陽");
/*沈陽 */D[8][0] = new Array("和平,沈河,皇姑,大東,鐵西,蘇家屯,東陵,新城子,於洪,新民,遼中,康平,法庫,渾南新區,沈北新區");
/*大連 */D[8][1] = new Array("西崗,中山,沙河口,甘井子,旅順口,金州,開發區,高新園區,長興島,普蘭店,瓦房店,莊河");
/*南京 */D[9][0] = new Array("白下,秦淮,玄武,鼓樓,下關,建鄴,江寧,六合,浦口,棲霞,雨花,大廠,溧水,高淳");
/*蘇州 */D[9][1] = new Array("園區,新區,平江,滄浪,金閶,虎丘,吳中,昆山,常熟,太倉,張家港,相城,吳江");
/*南通 */D[9][2] = new Array("城東區,城南區,城北區,城中區,狼山區,天生港,唐閘區,觀音山區,開發區,海安縣,如臯市,如東縣,通州,海門,啟東市,海門市,港閘,崇川");
/*無錫 */D[9][3] = new Array("崇安區,南長區,北塘區,新區,濱湖區,惠山區,馬山區,錫山區,江陰市,宜興市");
/*鹽城 */D[9][4] = new Array("鹽城,東臺,大豐,鹽都,建湖,響水,阜寧,射陽,濱海");
/*徐州 */D[9][5] = new Array("豐縣,鼓樓,賈汪,金山橋開發區,沛縣,邳州市,泉山,睢寧市,新城區,雲龍,銅山區");
/*常州 */D[9][6] = new Array("金壇,溧陽,戚區,天寧,武進,新北,鐘樓");
/*連雲港 */D[9][7] = new Array();
/*常熟 */D[9][8] = new Array();
/*揚州 */D[9][9] = new Array("寶應市,廣陵區,高郵市,邗江區,江都市,開發區,維揚區,儀征市");
/*鎮江 */D[9][10] = new Array("丹陽市,句容市,揚中市,丹徒區,京口區,潤州區,鎮江新區");
/*泰州 */D[9][11] = new Array("城中區,城東區,城西區,城南區,城北區,高港區,泰興市,姜堰市,興化市,靖江市");
/*昆山 */D[9][12] = new Array("巴城鎮,澱山湖鎮,花橋鎮,錦溪鎮,陸家鎮,千燈鎮,玉山鎮,張浦鎮,周市鎮,周莊鎮");
/*福州 */D[10][0] = new Array("臺江,鼓樓,倉山,晉安,馬尾,閩侯縣,長樂市");
/*廈門 */D[10][1] = new Array("開元,湖裏,思明,鼓浪嶼,集美,杏林,海滄,同安,翔安,漳州,龍巖,泉州");
/*泉州 */D[10][2] = new Array("豐澤區,安溪縣,德化縣,惠安縣,晉江市,鯉城區,洛江區,南安市,泉港區,石獅市,永春縣");
/*石家莊 */D[11][0] = new Array("橋東,橋西,新華,裕華,長安,開發區,正定,平山,鹿泉市,欒城,槁城");
/*唐山 */D[11][1] = new Array("曹妃甸工業區,豐南,豐潤,高新區,古冶,海港開發區,漢沽管理區,開平,樂亭縣,盧臺開發區,路北,路南,灤南縣,灤縣,南堡開發區,遷安市,遷西縣,唐海縣,玉田縣,遵化市");
/*邯鄲 */D[11][2] = new Array();
/*保定 */D[11][3] = new Array();
/*廊坊 */D[11][4] = new Array("安次,廣陽,三河,霸州,香河,永清,固安,文安,大城,大廠");
/*衡水 */D[11][5] = new Array("桃城區,深州市,冀州市,安平縣,故城縣,阜城縣,景縣,棗強縣,武強縣,饒陽縣,開發區,武邑縣,郊區");
/*秦皇島 */D[11][6] = new Array("北戴河,昌黎縣,撫寧縣,海港,盧龍縣,青龍縣,山海關");
/*鄭州 */D[12][0] = new Array("金水,中原,管城,二七,邙山,惠濟,經濟技術開發區,鄭東新區");
/*洛陽 */D[12][1] = new Array("澗西區,西工區,老城區,?河區,洛龍區,吉利區,偃師市,欒川縣,孟津縣,鹹陽縣,伊川縣,宜陽縣");
/*長春 */D[13][0] = new Array("朝陽,寬城,二道,南關,綠園,雙陽,其它,吉林地區,高新,經開,凈月,汽開");
/*吉林 */D[13][1] = new Array("昌邑區,船營區,龍潭區,豐滿區,永吉縣,舒蘭市,磐石市,蛟河市,樺甸市,經開區,高新區");
/*哈爾濱 */D[14][0] = new Array("道裏,道外,南崗,動力,平房,香坊,太平,開發區,阿城,呼蘭,松北");
/*濟南 */D[15][0] = new Array("市中,天橋,歷下,槐蔭,歷城,長清,高新,濟陽,平陰,商河,章丘");
/*青島 */D[15][1] = new Array("市南,市北,四方,李滄,嶗山,城陽,黃島,即墨市,膠州市,膠南市,平度市,萊西市,開發區");
/*威海 */D[15][2] = new Array("環翠區,文登市,榮成市,乳山市,高區,經區");
/*煙臺 */D[15][3] = new Array("芝罘區,福山區,龍口市,萊陽市,萊州市,蓬萊市,招遠市,萊山區,開發區,牟平區,棲霞市,海陽市,長島縣");
/*濰坊 */D[15][4] = new Array("奎文,濰城,寒亭,坊子,壽光市,高新技術開發區,經濟開發區");
/*日照 */D[15][5] = new Array("東港");
/*臨沂 */D[15][6] = new Array("蘭山");
/*合肥 */D[16][0] = new Array("中市,東市,西市,郊區,廬陽區,包河區,瑤海區,蜀山區,高新區,新站區,經開區,政務區,濱湖新區");
/*南寧 */D[17][0] = new Array("興寧,青秀,西鄉塘,江南,良慶,邕寧,桂林市,北海市,欽州市");
/*桂林 */D[17][1] = new Array("秀峰區,疊彩區,象山區,七星區,雁山區,西城區,八裏街區");
/*北海 */D[17][2] = new Array("海城,銀海,鐵山港,合浦");
/*海南 */D[18][0] = new Array("海口市,三亞市,文昌市,瓊海市,萬寧市,儋州市,東方市,五指山市,保亭縣,洋浦經濟開發區,其他,定安縣,澄邁縣");
/*呼和浩特*/D[19][0] = new Array("回民,玉泉,新城,金川開發區,金橋開發區,金山開發區,如意開發區,賽罕,郊區,托克托,清水河,武川,和林格爾,土默特左旗");
/*太原 */D[20][0] = new Array("杏花嶺,小店,迎澤,尖草坪,萬柏林,晉源,榆次");
/*銀川 */D[21][0] = new Array("城區,新城,興慶區,金鳳區,西夏區,永定縣,賀蘭縣,靈武市");
/*蘭州 */D[22][0] = new Array("城關,七裏河,西固,安寧,紅古,永登,榆中,臯蘭");
/*西安 */D[23][0] = new Array("城北,城南,城東,城內,城西,高新,長安,臨潼,藍田,閻良,灞橋,鹹陽");
/*西寧 */D[24][0] = new Array("城中,城東,城西,城北,湟源,湟中,大通回族土族自治縣");
/*武漢 */D[25][0] = new Array("江漢,江岸,?口,漢陽,武昌,洪山,青山,東西湖,黃陂,江夏,陽邏,新洲,蔡甸,漢南,沌口");
/*宜昌 */D[25][1] = new Array("夷陵區,西陵區,伍家崗區,點軍區,?亭區,宜都市,當陽市,枝江市,東山開發區,遠安縣,興山縣,秭歸縣,長陽土家族自治縣,五峰土家族自治縣");
/*長沙 */D[26][0] = new Array("嶽麓,天心,雨花,開福,芙蓉,星沙,長沙經濟開發區");
/*南昌 */D[27][0] = new Array("東湖,西湖,青雲譜,灣裏,昌北,高新開發區,紅谷灘,南昌縣,青山湖,新建縣,郊區,進賢,安義");
/*昆明 */D[28][0] = new Array("盤龍區,五華區,官渡區,西山區,安寧,呈貢,其他,東川");
/*烏魯木齊*/D[29][0] = new Array("天山,沙伊巴克,新市,水磨溝,頭屯河,南泉,東山");
/*香港 */D[30][0] = new Array("北區,大埔去,東區,觀塘區,黃大仙區,九龍城區,葵青區,離島區,南區,沙田區,屯門區,灣仔區,西貢區,油尖旺區,元朗區,中西區,荃灣區");
/*臺北 */D[31][0] = new Array();
///城市與省份的序列對應、每個城市與每個區域數組對應
//創建城市對象，返回壹個該城市所在省份及所擁有區域的對象
function createCity(sCityName)
{
var oCity = new Object();
oCity.province = "";
oCity.city = sCityName;
oCity.dist = new Array();
oCity.pindex = -1;//所屬省份在省份數組中的位置index
oCity.cindex = -1;//城市在所屬城市數組中的位置index（二者用來確定區域數組）
var m = -1;var n = -1;
for(var i = 0; i < C.length; i++)
{
for(var j=0; j < C[i].length; j++)
{
if(C[i][j] == sCityName)
{
oCity.province = P[i];
oCity.dist = D[i][j];
oCity.pindex = i;
oCity.cindex = j;
break;
}
}
if(oCity.province != "")
{
break;
}
}
return oCity;
}
/*三級、省、市、區域*/
/*面向對象*/
function oMenu(selProvince,selCity,selDist)
{
///selProvince省份的select控件id
///selCity城市的select控件id
///selDist區域的select控件id
this.oProvince = document.getElementById(selProvince);
///城市變化，初始化區域
function fnInitDist(city)
{
var objCity = createCity(city);
var dist = objCity.dist.toString().split(',');
ClearSelect(selDist,"請選擇區域");
InitSelect(selDist,dist,"");
};
///初始化城市
function fnInitCity(province)
{
for(var i = 0;i < P.length;i++)
{
if(P[i] == province)
{
ClearSelect(selCity,"請選擇城市");
InitSelect(selCity,C[i],"");
ClearSelect(selDist,"請先選擇城市");
document.getElementById(selCity).onchange = function (){fnInitDist(this.value);};
break;
}
}
};
///初始化省份
this.fnInitProvince = function(){
InitSelect(selProvince,P,"請選擇省份");
ClearSelect(selCity,"請先選擇省份");
ClearSelect(selDist,"請先選擇城市");
this.oProvince.onchange = function (){fnInitCity(this.value);};
};
///初始化select控件
function InitSelect(obj,aInitValue,sMenu)
{
///obj:要初始化的select控件對象的id
///aInitValue:要初始化的數組值
///sMenu:在select控件頭部要添加的option，value為空；如果該參數為空，則只初始化aInitValue而不加頭部
if(sMenu != "")
{
document.getElementById(obj).options.add(new Option(sMenu,""));
}
for(var i = 0; i < aInitValue.length; i++)
{
document.getElementById(obj).options.add(new Option(aInitValue[i],aInitValue[i]));
}
}
function ClearSelect(obj,sMenu)
{
document.getElementById(obj).options.length = 0;
document.getElementById(obj).options.add(new Option(sMenu,""));
}
}
var oMenu = new oMenu("selProvince","selCity","selDist");//select ID
oMenu.fnInitProvince();
</script>
</body>
</html>