How to write the drop-down menu of three-level linkage between provinces and cities

JS three-level linkage between provinces and cities:

& lt！ DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD " & gt；

& lthtml xmlns = " http://www . w3 . org/ 1999/XHTML " & gt；

& lthead & gt

& ltmeta http-equiv = " Content-Type " Content = " text/html； charset=utf-8" />

& lttitle & gtJS three-level linkage between provinces and cities

& lt/head & gt；

& ltbody & gt

& ltselect id = " sel province " name = " province " & gt；

& lt/select & gt；

& ltselect id = " sel city " name = " city " & gt；

& lt/select & gt；

& ltselect id = " sel dist " name = " area " & gt；

& lt/select & gt；

& ltdiv & gt& lt/div & gt；

& ltscript type = " text/JavaScript " & gt；

Variable temperature;

var P = new Array()；

var C = new Array()；

var D = new Array()；

P = new array (Beijing, Shanghai, Tianjin, Chongqing, Guangdong, Sichuan, Zhejiang, Guizhou, Liaoning, Jiangsu, Fujian, Hebei, Henan, Jilin and Heilongjiang)

/* Beijing */ C[0] = new array ("Beijing");

/* Shanghai */ C[ 1] = new array ("Shanghai");

/* Tianjin */ C[2] = new array ("Tianjin");

/* Chongqing */ C[3] = new array ("Chongqing");

/* Guangdong */ C[4] = new array ("Guangzhou", "Shenzhen", "Zhuhai", "Foshan", "Huizhou", "Dongguan", "Zhongshan", "Jiangmen", "Zhanjiang" and "Shantou");

/* Sichuan */ C[5] = new array ("Chengdu", "Zigong", "Panzhihua", "Luzhou");

/* Zhejiang */ C[6] = new array ("Hangzhou", "Ningbo", "Jiaxing", "Shaoxing", "Wenzhou", "Jinhua", "Quzhou", "Zhoushan", "Taizhou", "Lishui" and "Huzhou");

/* Guizhou */ C[7] = new array ("Guiyang");

/* Liaoning */ C[8] = new array ("Shenyang", "Dalian");

/* Jiangsu */ C[9] = new array ("Nanjing", "Suzhou", "Nantong", "Wuxi", "Yancheng", "Xuzhou", "Changzhou", "Lianyungang", "Changshu", "Yangzhou", "Zhenjiang", "Taizhou" and "Kunshan"

/* Fujian */C[ 10] = new array ("Fuzhou", "Xiamen", "Quanzhou");

/* Hebei */C[ 1 1] = new array ("Shijiazhuang", "Tangshan", "Handan", "Baoding", "Langfang", "Hengshui" and "Qinhuangdao");

/* Henan */C[ 12] = new array ("Zhengzhou", "Luoyang");

/* Jilin */C[ 13] = new array ("Changchun", "Jilin");

/* Heilongjiang */C[ 14] = new array ("Harbin");

/* Shandong */C[ 15] = new array ("Jinan", "Qingdao", "Weihai", "Yantai", "Weifang", "Rizhao", "Linyi" and "Zibo");

/* Anhui */C[ 16] = new array ("Hefei", "Wuhu", "Maanshan");

/* Guangxi */C[ 17] = new array ("Nanning", "Guilin", "Beihai" and "Liuzhou");

/* Hainan */C[ 18] = new array ("Hainan", "Sanya");

/* Inner Mongolia */C[ 19] = new array ("Hohhot", "Baotou");

/* Shanxi */C[20] = new array ("Taiyuan");

/* Ningxia */C[2 1] = new array ("Yinchuan");

/* Gansu */C[22] = New Array ("Lanzhou");

/* Shaanxi */C[23] = New Array ("xi 'an");

/* Qinghai */C[24] = New Array ("Xining");

/* Hubei */C[25] = new array ("Wuhan", "Yichang");

/* Hunan */C[26] = new array ("Changsha", "Zhuzhou", "Xiangtan");

/* Jiangxi */C[27] = New Array ("Nanchang" and "Ganzhou");

/* Yunnan */C[28] = New Array ("Kunming");

/* Xinjiang */C[29] = new array ("Urumqi");

/* Hong Kong */C[30] = new array ("Hong Kong");

/* Macau */C[3 1] = new array ("Macau");

/* Taiwan Province Province */C[3 1] = new array ("Taibei");

Used for (degrees Celsius in degree-day)

{

d[temp]= new Array()；

}

/* Beijing */D[0][0] = new array ("Haidian District, Chaoyang District, Dongcheng District, Xicheng District, Chongwen District, Xuanwu District, Fengtai District, Shijingshan District, Fangshan District, Mentougou District, Tongzhou District, Shunyi District, Changping District, Miyun District, Huairou District, Yanqing District, Pinggu District, Daxing District, Yanjiao District.

/* Shanghai */D[ 1][0] = new array ("Huangpu District, Luwan District, Xuhui District, Xujiahui District, Changning District, Jing 'an District, Putuo District, Hongkou District, Yangpu District, Baoshan District, Minhang District, Jiading District, Pudong New Area, Songjiang District, Jinshan District, Qingpu District, Zhabei District.

/* Tianjin */D[2][0] = new array ("Heping, Xiqing, Beichen, Dagang, Nankai, Hedong, Hexi, Hebei, Jinnan, Hongqiao, Tanggu, Hangu, Dongli, Baodi, Jixian, Wuqing, Ninghe, Jinghai, Development Zone")

/* Chongqing */D[3][0] = new array ("Nan 'an, Yubei, Wansheng, Dadukou, Wanzhou, Beibei, Shapingba, Banan, Shuangqiao, Fuling, Jiangbei, Jiulongpo and Yuzhong");

/* Guangzhou */D[4][0] = new array ("Liwan, Yuexiu, Dongshan, Tianhe, Haizhu, Huangpu, Fangcun, Baiyun, Huadu, Panyu, Dongguan, Guangzhou Economic and Technological Development Zone, Conghua, Zengcheng, Luogang, Qingyuan, Nansha and Foshan");

/* Shenzhen */D[4][ 1] = new array ("Futian, Luohu, Nanshan, Yantian, Baoan and Longgang");

/* Zhuhai */D[4][2] = new array ("Doumen, Hengqin, Jinwan, Xiangzhou and Tanzhou");

/* Foshan */D[4][3] = new array ("Nanhai, Shunde, Sanshui, Gaoming, Chancheng");

/* Huizhou */d [4] = new array ("Boluo County, Daya Bay District, Huicheng District, Huidong County, Huiyang District, Longmen County and Zhong Kai District");

/* Dongguan */D[4][5] = New Array ("Chashan, Chang 'an, Changping, Da Lang, Dalingshan, Daodao? , Dongcheng, Dongkeng, Fenggang, Gao? Guancheng, Hongmei, Houjie, Huangjiang, Humen, Liaobu, Mayong, Cheng Nan, Qishi, Qiaotou, Qingxi, Shatian, Shijie, Shilong, Shipai, Songshan Lake, Tangxia, John Wan, Wangniudun, Xiegang, Zhangmutou and Zhongdian);

/* Zhongshan */D[4][6] = new array ("East, South, West, Shi Qi, nantou town, Guzhen, Dongfeng Town, Xiaolan, Huangpu, Triangle, Minzhong, Fusha, Torch, Port, Dongsheng, henglan town, shaxi town, Dayong, Banfu.

/* Jiangmen */D[4][7] = new array ("Xinhui District, Pengjiang District, Jianghai District, Taishan City, enping city City, Heshan City, Kaiping City");

/* Chengdu */D[5][0] = new array ("Qingyang, Jinjiang, Jinniu, Wuhou, Chenghua, Longquanyi, Qingbaijiang, High-tech Zone, Jintang County, Xindu District, Wenjiang District, Pixian County, Shuangliu County, Xinjin County, Dayi County, Dujiangyan City, chongzhou city City and Qionglai City.

/* Hangzhou */D[6][0] = new array ("Shangcheng, Xiacheng, West Lake, Gongshu, Jianggan, Binjiang, Yuhang, Xiaoshan, Fuyang, Tonglu, Lin 'an, Chun 'an and Jiande");

/* Ningbo */D[6][ 1] = new array ("Haishu, Jiangdong, Jiangbei, Yinzhou, Zhenhai, Beilun, Cixi, Yuyao, Fenghua, Ninghai, Xiangshan, High-tech Zone and Dongqian Lake Tourist Resort");

/* Jiaxing */D[6][2] = new array ("Jiashan, Pinghu, Haiyan, Haining, Tongxiang, Xiuzhou, Nanhu, Urban Area, Economic Development Zone");

/* Shaoxing */D[6][3] = new array ("Shaoxing County, Zhuji City, Shangyu City, Xinchang County, Yuecheng District of Shengzhou City");

/* Guiyang */D[7][0] = new array ("Yunyan, Nanming, Jinyang New District, Xiaohe, Huaxi, Wudang, Baiyun, Qingzhen, Kaiyang, Xiuwen, Xifeng, Xiaohe Pian, Jinyang");

/* Shenyang */D[8][0] = new array ("Heping, Shenhe, Huanggu, Dadong, Tiexi, Sujiatun, Dongling, Xinchengzi, Yuhong, Xinmin, Liaozhong, Kangping, Faku, Hunnan New District and Shenbei New District");

/* Dalian */D[8][ 1] = new array ("Xigang, Zhongshan, Shahekou, Ganjingzi, Lushunkou, Jinzhou, Development Zone, High-tech Park, Changxing Island, Pulandian, Wafangdian and Zhuanghe");

/* Nanjing */D[9][0] = new array ("Baixia, Qinhuai, Xuanwu, Gulou, Xiaguan, Jianye, Jiangning, Liuhe, Pukou, Qixia, Yuhua, Dachang, Lishui and Gaochun");

/* Suzhou */D[9][ 1] = new array ("Park, New District, Pingjiang, Canglang, Jinchang, Huqiu, Wuzhong, Kunshan, Changshu, Taicang, Zhangjiagang, Xiangcheng and Wujiang");

/* Nantong */D[9][2] = new array ("Chengdong District, Chengnan District, Chengbei District, Chengzhong District, Langshan District, Tianshenggang, Tangzha District, Guanyin Mountain Area, Development Zone, Hai 'an County, Rugao City, Rudong County, Tongzhou, Haimen, Qidong City, Haimen City, Gangzha and Chongchuan");

/* Wuxi */D[9][3] = new array ("Chong 'an District, nanchang district, Beitang District, New District, Binhu District, Huishan District, Mashan District, Xishan District, Jiangyin City and Yixing City");

/* Yancheng */D[9][4] = new array ("Yancheng, Dongtai, Dafeng, Du Yan, Jianhu, Xiangshui, Funing, Sheyang and Binhai");

/* Xuzhou */D[9][5] = new array ("Fengxian, Gulou, Jiawang, Jinshanqiao Development Zone, Peixian, Pizhou, Quanshan, Suining, Xincheng, Yunlong and tongshan district");

/* Changzhou */D[9][6] = new array ("Jintan, Liyang, Qiqu, Tianning, Wujin, Xinbei, Bell Tower");

/* Lianyungang */d [9] [7] = newarray ();

/* Changshu */d [9] [8] = newarray ();

/* Yangzhou */D[9][9] = new array ("Baoying City, Guangling District, Gaoyou City, Hanjiang District, Jiangdu City, Development Zone, Yizheng City weiyang district");

/* Zhenjiang */D[9][ 10] = new array ("Danyang City, jurong city City, Yangzhong City, Dantu District, Jingkou District, Runzhou District, Zhenjiang New District");

/* Taizhou */D [9] [1 1] = new array ("Chengzhong District, Chengdong District, Chengxi District, Chengnan District, Chengbei District, gaogang district, Taixing City, Jiangyan City, xinghua city City and Jingjiang City");

/* Kunshan */D[9][ 12] = new array ("bacheng town, Dianshan Lake Town, huaqiao town, Jinxi Town, Lujia Town, Qiandeng Town, Yushan Town, Zhang Pu Town, Zhoushi Town and Zhouzhuang Town");

/* Fuzhou */D[ 10][0] = new array ("Taijiang, Gulou, Cangshan, Jinan, Mawei, Minhou County, Changle City");

/* Xiamen */d [10] [1] = new array ("Kaiyuan, Huli, Siming, Gulangyu, Jimei, Xinglin, Haicang, Tongan, Xiang 'an, Zhangzhou, Longyan and Quanzhou");

/* Quanzhou */D[ 10][2] = new array ("Fengze District, Anxi County, Dehua County, Hui 'an County, Jinjiang City, Licheng District, Luojiang District, Nan 'an City, Quangang District, shishi city County, Yongchun County");

/* Shijiazhuang */d [1 1] [0] = new array ("Qiaodong, Qiaoxi, Xinhua, Yuhua, Chang 'an, Development Zone, Zhengding, Pingshan, Luquan, Luancheng and Gaocheng");

/* Tangshan */d [11] = new array ("Caofeidian Industrial Zone, Fengnan, Feng Run, High-tech Zone, Guye, Haigang Development Zone, Hangu Management Zone, Kaiping, Laoting County, Lutai Development Zone, Lubei, Lunan, Luanhe.

/* Handan */d [11] [2] = newarray ();

/* Baoding */d [11] [3] = newarray ();

/* Langfang */d [1 1] [4] = new array ("Anci, Yangguang, Sanhe, Bazhou, Xianghe, Yongqing, Gu 'an, Wen 'an, Big City, Dachang");

/* Hengshui */d [1 1] [5] = new array ("Taocheng District, Shenzhou City, jizhou city, Anping County, Gucheng County, Fucheng County, Jingxian County, Zaoqiang County, Wuqiang County, Raoyang County, Development Zone, Wuyi County, Suburb");

/* Qinhuangdao */d [1 1] [6] = new array ("Beidaihe, Changli County, Funing County, Haigang, lulong county, Qinglong County, Shanhaiguan");

/* Zhengzhou */D[ 12][0] = new array ("Jinshui, Zhongyuan, Guancheng, Erqi, Mangshan, Huiji, Economic and Technological Development Zone, Zhengdong New District");

/* Luoyang */d [12] [1] = new array ("jianxi district, Xigong District, Old Town,? River District, Luolong District, Geely District, yanshi city, Luanchuan County, Mengjin County, Xianyang County, Yichuan County, Yiyang County ");

/* Changchun */D[ 13][0] = new array ("Chaoyang, Kuancheng, Erdao, Nanguan, Luyuan, Shuangyang, Others, Jilin, Gaoxin, Jingkai, Qingyue and Qikai");

/* Jilin */d [13] [1] = new array ("Changyi District, chuanying, Longtan District, Fengman District, Yongji County, shulan city, panshi city, jiaohe city, huadian city, Economic Development Zone, High-tech Zone");

/* Harbin */D[ 14][0] = new array ("Daoli, Daowai, Nangang, Dongli, Pingfang, Xiangfang, Taiping, Development Zone, Acheng, Hulan and Songbei");

/* Jinan */D[ 15][0] = new array ("Shizhong, Tianqiao, Lixia, Huaiyin, Licheng, Changqing, Gaoxin, Jiyang, Pingyin, Shanghe and Zhangqiu");

/* Qingdao */D [15] [1] = new array ("Shinan, Shibei, Sifang, Licang, Laoshan, Chengyang, Huangdao, jimo city, jiaozhou city, Jiaonan, pingdu city, Laixi and Development Zone");

/* Weihai */D[ 15][2] = new array ("Huancui District, Wendeng City, Rongcheng City, Rushan City, Gaoqu District, Economic Zone");

/* Yantai */D[ 15][3] = new array ("Zhifu District, Fushan District, Longkou City, Laiyang City, Laizhou City, Penglai City, Zhaoyuan City, Laishan City, Development Zone, Muping District, Qixia City, Haiyang City and Changdao County");

/* Weifang */D[ 15][4] = new array ("Kuiwen, Weicheng, Hanting, Fangzi, Shouguang, High-tech Development Zone, Economic Development Zone");

/* Rizhao */D[ 15][5] = new array ("Donggang");

/* Linyi */D[ 15][6] = new array ("Lanxin");

/* hefei */d [16] [0] = new array ("Zhong Shi, Dongshi, Xishi, Suburb, Luyang, Baohe, Yaohai, Shushan, Gaoxin, New Station, Economic Development Zone, Administrative District and Binhu New District");

/* Nanning */D[ 17][0] = new array ("Xingning, Qingxiu, Xixiangtang, Jiangnan, Liangqing, Yongning, Guilin, Beihai and Qinzhou");

/* Guilin */d [17] [1] = new array ("Xiufeng District, Diecai District, Xiangshan District, Qixing District, Yanshan District, Xicheng District and Bali Block");

/* Beihai */D[ 17][2] = new array ("Hai Yin Haicheng Tieshan Port Hepu");

/* Hainan */D[ 18][0] = new array ("Haikou, Sanya, Wenchang, qionghai city, Wanning, Danzhou, Dongfang, Wuzhishan, Baoting, Yangpu Economic Development Zone, Others, Ding 'an and Chengmai");

/* Hohhot */D[ 19][0] = new array ("Huimin, Yuquan, Xincheng, Jinchuan Development Zone, Jinqiao Development Zone, Jinshan Development Zone, Ruyi Development Zone, Sai Han, Suburb, Tuoketuo, Qingshuihe, Wuchuan, Horinger, Tumote Zuo Qi");

/* Taiyuan */D[20][0] = new array ("Xinghualing, Xiaodian, Yingze, Cao Jian, Wanbailin, Jinyuan and Yuci");

/* Yinchuan */D[2 1][0] = new array ("Urban area, Xincheng, xingqing district, jinfeng district, Xixia District, Yongding County, Helan County, lingwu city");

/* Lanzhou */D[22][0] = new array ("Chengguan, Qilihe, Xigu, Anning, Honggu, Yongdeng, Yuzhong and Gaolan");

/* Xi 'an */D[23][0] = New Array ("North, South, East, Inner, West, Gaoxin, Chang 'an, Lintong, Lantian, Yanliang, Baqiao and Xianyang");

/* Xining */D[24][0] = new array ("Chengzhong, Chengdong, Chengxi, Chengbei, Huangyuan, Huangzhong, Datong Hui and Tu Autonomous County");

/* Wuhan */D[25][0] = New Array ("Jianghan, Jiang 'an,? Kou, Hanyang, Wuchang, Hongshan, Qingshan, Dongxihu, Huangpi, Jiangxia, Yangluo, Xinzhou, Caidian, Hannan, Dunkou);

/* Yichang */D[25][ 1] = new array ("Yiling District, Xiling District, Wujiagang District, Dianjun District,? Pavilion District, Yidu City, dangyang city, zhijiang city, Dongshan Development Zone, Yuan 'an County, Xingshan County, Zigui County, Changyang Tujia Autonomous County, Wufeng Tujia Autonomous County);

/* Changsha */D[26][0] = new array ("Yuelu, Tianxin, Yuhua, Kaifu, Furong, Xingsha and Changsha Economic Development Zone");

/* Nanchang */D[27][0] = new array ("East Lake, West Lake, Qingyunpu Scenic Resort Scenic Area, Wan Li, Changbei, High-tech Development Zone, Honggutan, Nanchang County, Qingshan Lake, Xinjian County, Suburb, Jinxian and Anyi");

/* Kunming */D[28][0] = new array ("Panlong District, Wuhua District, Guandu District, Xishan District, Anning, Chenggong, Others, Dongchuan");

/* Urumqi */D[29][0] = new array ("Tianshan, Shayibake, Xinshi, Shuimogou, Toutunhe, Nanquan and Dongshan");

/* Hong Kong */D[30][0] = new Array ("North District, Tai Po District, Eastern District, Kwun Tong District, Wong Tai Sin District, Kowloon City District, Kwai Tsing District, Islands District, Southern District, Sha Tin District, Tuen Mun District, Wan Chai District, Sai Kung District, Yau Tsim Mong District, Yuen Long District, Central and Western District, Tsuen Wan District");

/* Taipei */d [31] [0] = new array ();

///Cities correspond to province sequences, and each city corresponds to each regional array.

//Create a city object and return the objects of provinces and regions to which a city belongs.

Function to create a city (scientific name)

{

var oCity = new Object()；

oCity.province =

oCity.city = sCityName

ocity . dist = new Array()；

ocity . pin dex =- 1； //Location index of the province in the province array.

ocity . cindex =- 1； //Location index of cities in the city array (both are used to determine the area array)

var m =- 1； var n =- 1；

for(var I = 0； I<c. Length; i++)

{

for(var j = 0； j & ltC[i]。 Length; j++)

{

if(C[i][j] == sCityName)

{

ocity . province = P[I]；

ocity . dist = D[I][j]；

ocity . pin dex = I；

ocity . cindex = j；

Break;

}

If (oCity.province! = "")

{

Break;

}

Return speed;

}

/* Level 3, province, city and region */

/* Object-oriented */

Function oMenu(selProvince, selCity, selDist)

{

///id of the selection control in selprovince.

///id of the selection control of the selcity city.

///the id of the selected control in the ///selDist area.

this . o province = document . getelementbyid(sel province)；

///Urban change, initialization area

Function fnInitDist (city)

{

Var objCity = createCity;

var dist = objCity.dist.toString()。 Split (',');

ClearSelect(selDist, "Please select a region");

InitSelect(selDist，Dist，" ")；

};

///Initialize the city

Limited function (province)

{

for(var I = 0； I<p. Length; i++)

{

If(P[i] == province)

{

ClearSelect(selCity, "Please select a city");

InitSelect(selCity，C[i]，" ")；

ClearSelect(selDist, "Please select a city first");

document . getelementbyid(sel city)。 onchange = function(){ fnInitDist(this . value)； };

Break;

}

};

///Initialize provinces

this . fninitprovince = function(){

InitSelect(selProvince, p, "Please select a province");

ClearSelect(selCity, "Please select a province first");

ClearSelect(selDist, "Please select a city first");

this . o province . onchange = function(){ fnInitCity(this . value)； };

};

///Initializes the selection control.

Function InitSelect(obj, aInitValue, sMenu)

{

///obj: id of the selection control object to be initialized.

///aInitValue: the array value to initialize.

///sMenu: the option to be added at the head of the selection control; the value is empty; If this parameter is empty, only aInitValue is initialized, not header.

If (sMenu! = "")

{

Document.getelementbyid (obj). options.add (new option (sMenu, "");

}

for(var I = 0； I & ltaInitValue.lengthi++)

{

document . getelementbyid(obj). options . add(new Option(ainit value[I]，ainit value[I]))；

}

Function ClearSelect(obj, sMenu)

{

document . getelementbyid(obj). options . length = 0；

Document.getelementbyid (obj). options.add (new option (sMenu, "");