To achieve the choice of two-level region, the front-end has about two forms, first, you are going to put two text boxes, when you click on the text box, the list of provinces appears, and when you click on the second text box, the list of cities in the province appears; the second is to put two drop-down boxes, select one in the first dropdown box, and then the second to select the appropriate urban area. , of course, there are other ways, I do one here, that is, the Drop-down selection, the code is as follows:
HTML code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<body>
<script type= "Text/javascript" >
function Initcity (city) {
Switch (document.creator["province"].value) {
Case "Anhui": var cityoptions = new Array ("Please select Region", "", "Hefei (*)", "Hefei", "Anqing", "Anqing", "Bengbu", "Bengbu", "Bozhou", "Bozhou", "Chaohu", "Chaohu", "Chuzhou", "Chuzhou", "Fuyang", "Fuyang", "Guichi", "Guichi", "Huaibei," Huaibei "," Huai "," Huai "," Huainan "," Huainan "," Huangshan "," Huangshan "," Jiuhuashan "," Jiuhuashan "," Liu'an "," Liu'an "," Ma On Shan "," Ma On Shan "," Suzhou "," Suzhou "," Tongling "," Tongling "," Tunxi "," Tunxi "," Wuhu "," Wuhu "," Xuancheng "," Xuancheng "); Break
Case "Beijing": var cityoptions = new Array ("Please select Region", "", "Dongcheng", "Dongcheng", "Xicheng", "Xicheng", "Chongwen", "Chongwen", "Xuanwu", "Xuanwu", "Chaoyang", "Chaoyang", "Fengtai", "Feng Taiwan "," Shijingshan "," Shijingshan "," Haidian "," Haidian "," Mentougou, "Mentougou", "Fangshan", "Fangshan", "Tongzhou", "Tongzhou", "Shunyi", "Shunyi", "Changping", "Changping", "Daxing", "Daxing", "Pinggu", "Pinggu", "Huairou", "Huairou", "Miyun", "Miyun", "Yanqing", "Yanqing"); Break
Case "Chongqing": var cityoptions = new Array ("Please select Region", "" "," Wanxian "," Wanxian "," Fuling "," Fuling "," Yuzhong "," Yuzhong "," Dadukou "," Dadukou "," Jiangbei "," Jiangbei "," Shapingba ", "Shapingba", "Jiulongpo", "Jiulongpo", "South Bank", "South Bank", "Beibei", "Beibei," Wansheng "," Wansheng "," Double Cambridge "," Double Cambridge "," Yubei "," Yubei "," Banan "," Banan "," Qianjiang "," Qianjiang "," longevity "," longevity "," Qijiang ", "Qijiang", "Tongnan", "Tongnan", "Tongliang", "Tongliang", "Dazu", "Dazu," Rongchang "," Rongchang "," Bishan "," Bishan "," liangping "," liangping "," Chengkou "," Chengkou "," Fengdu "," Fengdu "," Dianjiang "," Dianjiang "," Wulong "," Wulong "," Zhongxian "," Zhongxian "," Kai "," Kai "," Yunyang "," Yunyang "," Fengjie "," Fengjie "," Wushan "," Wushan "," Wuxi "," Wuxi "," stone pillars "," pillars "," Xiushan "," Xiushan "," Youyang "," Youyang "," Pengshui "," Pengshui "," Jiangjin "," Jiangjin "," Hechuan "," Hechuan "," Yongchuan "," Yongchuan "," Nanchuan "," Nanchuan "); Break
Case "Fujian": var cityoptions = new Array ("Please select Region", "", "Fuzhou (*)", "Fuzhou", "Fu'an", "Fu'an", "Longyan", "Longyan", "Nanping", "Nanping", "Ningde", "Ningde", "Putian", "Putian", "Quanzhou", "Quanzhou", "sanming", "sanming", "Shaowu", "Shaowu", "Shishi", "Shishi", "Yong ' an", "Yong ' an", "Wuyi Mountain", "Wuyi Mountain", "Xiamen", "Xiamen", "Zhangzhou", "Zhangzhou"); Break
Case "Gansu": var cityoptions = new Array ("Please select Region", "", "Lanzhou (*)", "Lanzhou", "Silver", "Silver", "Dingxi", "Dingxi", "Dunhuang", "Dunhuang", "Gannan", "Gannan", "Jinchang", "Jinchang", "Jiuquan", "Jiuquan", "Linxia", "Linxia", "Pingliang", "Pingliang", "Tianshui", "Tianshui", "Wudu", "Wudu", "Wuwei", "Wuwei", "Xifeng", "Xifeng", "Zhangye", "Zhangye"); Break
Case "Guangdong": var cityoptions = new Array ("Please select Region", "", "Guangzhou (*)", "Guangzhou", "Chaoyang", "Chaoyang", "Chaozhou", "Chaozhou", "Chenghai", "Chenghai", "Dongguan", "Dongguan", "Foshan", "Foshan", "Heyuan", "Heyuan", "Huizhou", "Huizhou", "Jiangmen", "Jiangmen," Jieyang "," Jieyang "," Kaiping "," Kaiping "," Maoming "," Maoming "," Meizhou "," Meizhou "," Qingyuan "," Qingyuan "," Shantou "," Shantou "," Shanwei "," Shanwei "," Shaoguan "," Shaoguan "," Shenzhen "," Shenzhen "," Shunde "," Shunde, "Yangjiang", "Yangjiang", "Anglo-German", "Anglo-German", "Yunfu", "Yunfu", "Zengcheng", "Zengcheng", "Zhanjiang", "Zhanjiang", "Zhaoqing", "Zhaoqing", "Zhongshan", "Zhongshan "," Zhuhai "," Zhuhai "); Break
Case "Guangxi": var cityoptions = new Array ("Please select Region", "", "Nanning (*)", "Nanning", "Baise", "Baise", "Beihai", "Beihai", "Guilin", "Guilin", "Fangchenggang", "Fangchenggang", "Hechi , "Hechi", "Hezhou", "Hezhou", "Liuzhou", "Liuzhou", "Qinzhou", "Qinzhou", "Wuzhou", "Wuzhou", "Yulin", "Yulin"); Break
Case "Guizhou": var cityoptions = new Array ("Please select Region", "", "Guiyang (*)", "Guiyang", "Anshun", "Anshun", "Bijie", "Bijie", "Duyun", "Duyun", "Carey", "Carey", "Liupanshui" , "Liupanshui", "Tongren", "Tongren", "Xingyi", "Xingyi", "Jade Screen", "Jade Screen", "Zunyi", "Zunyi"); Break
Case "Hainan": var cityoptions = new Array ("Please select Region", "", "Haikou (*)", "Haikou", "Dan County", "Dan County", "Lingshui", "Lingshui", "Qionghai", "Qionghai", "Sanya", "Sanya", "Tong", "Pass", "Wanning", "Wanning"); Break
Case "Hebei": var cityoptions = new Array ("Please select Region", "", "Shijiazhuang (*)", "Shijiazhuang", "Baoding", "Baoding", "Beidaihe", "Beidaihe", "Cangzhou", "Cangzhou", "Chengde", "Chengde", " Run "," "Rich", "Handan", "Handan", "Hengshui", "Hengshui", "Langfang", "Langfang", "Nandaihe", "Nandaihe", "Qinhuangdao", "Qinhuangdao", "Tangshan", "Tangshan", "New Town", "New Town", "Xingtai", "Xingtai", "Zhangjiakou", "Zhangjiakou "); Break
Case "Heilongjiang": var cityoptions = new Array (Please select region, "" "," Harbin (*) "," Harbin "," Bei "," Bei "," Daqing "," Daqing "," daxinganling "," daxinganling "," Hegang "," Hegang " , "Heihe", "Heihe", "Jiamusi", "Jiamusi", "Jixi", "Jixi", "Mudanjiang", "Mudanjiang", "Qiqihar", "Qiqihar", "Qitaihe", "Qitaihe", "Shuangyashan", "Shuangyashan", "Suihua", "Suihua", "Yichun", "Yichun"); Break
Case "Henan": var cityoptions = new Array ("Please select Region", "", "Zhengzhou (*)", "Zhengzhou", "Anyang", "Anyang", "Hebi", "Hebi", "Huangchuan", "Huangchuan", "Jiaozuo", "Jiaozuo", "Jiyuan", "Jiyuan", "Kaifeng", "Kaifeng", "Luohe", "Luohe", "Luoyang," Luoyang "," Nanyang "," Nanyang "," Pingdingshan "," Pingdingshan "," Puyang "," Puyang "," Sanmenxia "," Sanmenxia "," Shangqiu "," Shangqiu "," Xinxiang "," Xinxiang "," Xinyang "," Xinyang "," Xuchang "," Xuchang "," Zhoukou "," Zhoukou "," Zhumadian "," Zhumadian "); Break
Case "Hong Kong": var cityoptions = new Array ("Please select Region", "" "," Hong Kong "," Hong Kong "," Kowloon "," Kowloon "," New Territories "," New Territories "); Break
Case "Hubei": var cityoptions = new Array ("Please select Region", "", "Wuhan (*)", "Wuhan", "Enshi", "Enshi", "Ezhou", "Ezhou", "Huanggang", "Huanggang", "Yellowstone", "Yellowstone", "Jingmen", "Jingmen", "Jingzhou", "Jingzhou", "Qianjiang", "Qianjiang", "Shiyan", "Shiyan", "Suizhou", "Suizhou", "Wuxue", "Wuxue", "Xiantao", "Xiantao", "Xianning", "Xianning", "Xiangyang", "Xiangyang", "Xiangfan", "Xiangfan", "Xiaogan," " Xiaogan ", Yichang", "Yichang"); Break
Case "Hunan": var cityoptions = new Array ("Please select Region", "", "Changsha (*)", "Changsha", "Changde", "Changde", "Chenzhou", "Chenzhou", "Hengyang", "Hengyang", "Huaihua", "Huaihua", "Jishou", "Jishou", "Loudi", "Loudi", "Shaoyang", "Shaoyang", "Xiangtan", "Xiangtan", "Yiyang", "Yiyang", "Yueyang", "Yueyang", "Yongzhou", "Yongzhou", "Zhangjiajie", "Zhangjiajie", "Zhuzhou", "Zhuzhou"); Break
Case "Jiangsu": var cityoptions = new Array ("Please select Region", "", "Nanjing (*)", "Nanjing", "Changshu", "Changshu", "Changzhou", "Changzhou", "Haimen", "Haimen", "Huai", "Huai", "Jiangdu", "Jiangdu", "Jiangyin", "Jiangyin", "Kunshan", "Kunshan", "Lianyungang," Lianyungang "," Nantong "," Nantong "," Qidong "," Qidong "," Shuyang "," Shuyang "," Suqian "," Suqian "," Suzhou "," Suzhou "," Taicang "," Taicang "," Taizhou ", "Taizhou", "Tong Li", "Tong Li", "Wuxi", "Wuxi", "Xuzhou," Xuzhou "," Yancheng "," Yancheng "," Yangzhou "," Yangzhou "," Yixing "," Yixing "," Yizheng "," Yizheng "," Zhangjiagang "," Zhangjiagang "," Zhenjiang "," Zhenjiang "," Zhouzhuang ", "Zhouzhuang"); Break
Case "Jiangxi": var cityoptions = new Array ("Please select Region", "", "Nanchang (*)", "Nanchang", "Fuzhou", "Fuzhou", "Ganzhou", "Ganzhou", "Ji ' an", "Ji", "Jingdezhen", "Jingdezhen", "Well Gang Mountain "," Jinggangshan "," Jiujiang, "Jiujiang", "Lushan", "Lushan", "Pingxiang", "Pingxiang", "Shangrao", "Shangrao", "Xinyu", "Xinyu", "Yichun", "Yichun", "Yingtan", "Yingtan"); Break
Case "Jilin": var cityoptions = new Array ("Please select Region", "", "Changchun (*)", "Changchun", "Baicheng", "Baicheng", "Bss", "Bss", "Hunchun", "Hunchun", "Liaoyuan", "Liaoyuan", "Mei River", "Mei River", "Jilin", "Jilin", "Siping", "Siping", "Songyuan", "Songyuan", "Tonghua", "Tonghua", "Yanji", "Yanji"); Break
Case "Liaoning": var cityoptions = new Array ("Please select Region", "", "Shenyang (*)", "Shenyang", "Anshan", "Anshan", "Benxi", "Benxi", "Chaoyang", "Chaoyang", "Dalian", "Dalian", "Dandong", "Dandong", "Fushun", "Fushun", "Fuxin," Fuxin "," Huludao "," Huludao "," Jinzhou "," Jinzhou "," Liaoyang "," Liaoyang "," Panjin "," Panjin "," Tieling "," Tieling "," Yingkou "," Yingkou "); Break
Case "Macau": var cityoptions = new Array ("Please select Region", "", "Macau", "Macau"); Break
Case "Inner Mongolia": var cityoptions = new Array ("Please select Region", "" "," Hohhot (*) "," Hohhot "," Alxa League "," Alxa League "," Baotou "," Baotou "," Chifeng "," Chifeng "," Dongsheng "," East Wins "," Hailaer "," Hailaer "," Jining "," Jining "," Linhe "," Linhe "," Tongliao "," Tongliao "," Wuhai "," Wuhai "," Ulanhot "," Ulanhot "," Xilin Hot "," Xilin Hot "); Break
Case "Ningxia": var cityoptions = new Array ("Please select Region", "", "Yinchuan (*)", "Yinchuan", "Solid source", "Solid Source", "Shizuishan", "Shizuishan", "Wuzhong", "Wuzhong"); Break
Case "Qinghai": var cityoptions = new Array ("Please select Region", "", "xining (*)", "Xining", "Delinha", "Delinha", "Golmud", "Golmud", "Republic", "Republic", "Haidong", "Haidong", " Haiyan "," Haiyan "," Maqin "," Maqin "," Tongren "," Tongren "," Yushu "," Yushu "); Break
Case "Shandong": var cityoptions = new Array ("Please select Region", "", "Jinan (*)", "Jinan", "Binzhou", "Binzhou", "Yanzhou", "Yanzhou", "Dezhou", "Dezhou", "dongying", "dongying", "Heze", "Heze", "Jining", "Jining", "Laiwu", "Laiwu", "Liaocheng", "Liaocheng," Linyi "," Linyi "," Penglai "," Penglai "," Qingdao "," Qingdao "," Qufu "," Qufu "," Rizhao "," Rizhao "," Taian "," Taian "," Weifang "," Weifang "," Weihai "," Weihai "," Yantai "," Yantai "," Zaozhuang "," Zaozhuang "," Zibo "," Zibo "); Break
Case "Shanghai": var cityoptions = new Array ("Please select Region", "", "Chongming", "Chongming", "Huangpu", "Huangpu", "Luwan", "Luwan", "Xuhui", "Xuhui", "changning", "changning", "Jingan", "static Ann "," Putuo "," Putuo "," Zhabei "," Zhabei "," Hongkou "," Hongkou "," Yangpu "," Yangpu "," Minhang "," Minhang "," Baoshan "," Baoshan "," jiading "," jiading "," Pudong "," Pudong "," Jinshan "," Jinshan "," Songjiang "," Songjiang " , "Qingpu", "Qingpu", "Nanhui", "Nanhui", "Fengxian", "Fengxian"); Break
Case "Shanxi": var cityoptions = new Array ("Please select Region", "", "Taiyuan (*)", "Taiyuan", "Changzhi", "Changzhi", "Datong", "Datong", "Hou Ma", "Hou Ma", "Jincheng", "Jincheng", "Lishi", "Lishi", "Linfen," Linfen "," Ningwu "," Ningwu "," Shuozhou "," Shuozhou "," Xinzhou "," Xinzhou "," Yangquan "," Yangquan "," Yuci "," Yuci "," Yuncheng "," Yuncheng "); Break
Case "Shaanxi": var cityoptions = new Array ("Please select Region", "", "Xi ' an (*)", "Xi ' an", "Ankang", "Ankang", "Baoji", "Baoji", "Hanzhong", "Hanzhong", "Weinan", "Weinan", "Shangzhou", "Shangzhou", "Suide", "Suide", "Tongchuan", "Tongchuan", "Xianyang", "Xianyang", "Yanan", "Yanan", "Yulin", "Yulin"); Break
Case "Sichuan": var cityoptions = new Array ("Please select Region", "", "Chengdu (*)", "Chengdu", "Bazhong", "Bazhong", "Da Chuan", "Da Chuan", "Deyang", "Deyang", "Dujiangyan", "Dujiangyan", "Emei Mountain "," Mount Emei "," Fuling "," Fuling "," Guang an "," Guang ', "Guangyuan", "Guangyuan", "Jiuzhaigou", "Jiuzhaigou", "Kangding", "Kangding", "Leshan", "Leshan", "Luzhou", "Luzhou", "Maerkang", "Maerkang", "Mianyang", "Mianyang", "Meishan", "Meishan", "Nanchong", "Nanchong", "Neijiang", "Neijiang," Panzhihua "," Panzhihua "," Suining "," Suining "," Wenchuan "," Wenchuan "," Xichang "," Xichang "," Yaan "," Yaan "," Yibin "," Yibin "," Zigong "," Zigong ", "Ziyang", "Ziyang"); Break
Case "Taiwan": var cityoptions = new Array ("Please select Region", "", "Taipei (*)", "Taipei", "Keelung", "Keelung", "Tainan", "Tainan", "Taichung", "Taichung", "Kaohsiung", "Kaohsiung", "Pingdong", "Pingdong", "Nantou", "Nantou", "Yunlin", "Yunlin", "Hsinchu", "Hsinchu," Changhua "," Changhua "," Miaoli "," Miaoli "," Chiayi "," Chiayi "," Hualian "," Hualian "," Taoyuan "," Taoyuan "," Yilan "," Yilan "," Taitung "," Taidong "," Kinmen "," Kinmen "," Matsu "," Matsu "," Penghu "," Penghu "); Break
Case "Tianjin": var cityoptions = new Array ("Please select Region", "", "Tianjin", "Tianjin", "Peace", "peace", "Toray", "Toray", "Hedong", "Hedong", "xiqing", "xiqing", "Hexi", "River West "," Jinnan "," Jinnan "," Nankai "," Nankai "," Beichen "," Beichen "," Hebei "," Hebei "," Wuqing "," Wuqing "," Red Cambridge "," Red Cambridge "," Tanggu "," Tanggu "," Hangu "," Hangu "," Dagang "," Dagang "," Ninghe "," Ninghe " , "Jinghai", "Jinghai", "Baochi", "Baochi", "Jixian", "Jixian"); Break
Case "Xinjiang": var cityoptions = new Array ("Please select Region", "", "Urumqi", "Aksu", "Aksu", "Altai", "Altay", "Atushi", "Atushi", "Bole", " Bole "," Changji "," Changji "," Dongshan "," Dongshan "," Hami "," Hami "," Hotan "," Hotan "," Kashi "," Kashi "," Karamay "," Karamay "," Kuche "," Kuche "," Korla "," Korla "," Kuitun "," Kuitun "," Shi He Zi "," Shihezi "," Tacheng "," Tacheng "," Turpan "," Turpan "," Yining "," Yining "); Break
Case "Tibet": var cityoptions = new Array ("Please select Region", "", "Lhasa (*)", "Lhasa", "Ali", "Ali", "Qamdo", "Qamdo", "Linzhi", "Linzhi", "qu", "qu", "Shigatse" , "Shigatse", "Shannan", "Shannan"); Break
Case "Yunnan": var cityoptions = new Array ("Please select Region", "", "Kunming (*)", "Kunming", "Dali", "Dali", "Baoshan", "Baoshan", "Chuxiong", "Chuxiong", "Dali", "Dali", "Dongchuan", "Dongchuan", "Gejiu", "Gejiu", "Jinghong", "Jinghong", "Kaiyuan", "Kaiyuan", "Lincang", "Lincang", "Lijiang", "Lijiang", "Six Library", "Six Library", "Luxi", "Luxi", "Qujing", "Qujing", "Simao", "Simao", "Wenshan", " Wenshan, "Xishuangbanna", "Xishuangbanna", "Yuxi", "Yuxi", "Zhongdian", "Zhongdian", "Zhaotong", "Zhaotong"); Break
Case "Zhejiang": var cityoptions = new Array ("Please select Region", "", "Hangzhou (*)", "Hangzhou", "Anji", "Anji", "Cixi", "Cixi", "Dinghai", "Dinghai", "Fenghua", "Fenghua", "Haiyan", "Haiyan", "Huangyan", "Huangyan", "Huzhou", "Huzhou", "Jiaxing", "Jiaxing," Jinhua "," Jinhua "," Lin ' an "," Lin ' an "," Linhai "," Linhai "," Lishui "," Lishui "," Ningbo "," Ningbo "," Ouhai "," Ouhai "," Pinghu "," Pinghu "," Qiandaohu "," Qiandaohu "," Quzhou "," Quzhou "," Jiangshan "," Jiangshan "," Ruian "," Ruian "," Shaoxing "," Shaoxing "," Shengzhou "," Shengzhou "," Taizhou "," Taizhou "," Wenling "," Wenling "," Wenzhou "," Wenzhou "," Yuyao "," Yuyao "," Zhoushan "," Zhoushan "); Break
Case "Overseas": var cityoptions = new Array ("Please select Region", "", "Europe", "Europe", "North America", "North America", "South America", "South America", "Asia", "Asia", "Africa", "Africa", "Oceania", " Oceania "); Break Default:var cityoptions = new Array ("Please select Region", ""); Break } document.creator["City"].options.length = 0; for (var i = 0; i < CITYOPTIONS.LENGTH/2 i++) {document.creator[' city '].options[i]=new Option (cityoptions[i*2), Cityoptions[i*2+1]); if (document.creator["City"].options[i].value==city) {document.creator[' city '].selectedindex = i;}} function Creatprovince (province) {var provinces = new Array ("Beijing", "Shanghai", "Chongqing", "Anhui", "Fujian", "Gansu", "Guangdong", "Guangxi", "Guizhou", "Hainan", "Hebei", "Heilongjiang", "Henan", "Hong Kong", "Hubei", "Hunan", "Jiangsu", "Jiangxi", "Jilin", "Liaoning", "Macao", "Inner Mongolia", "Ningxia", "Qinghai", "Shandong", "Shanxi", "Shaanxi", "Sichuan", "Taiwan", "Tianjin", "Xinjiang", "Tibet", "Yunnan", "Zhejiang", "overseas"); document.creator["province"].options[0]=new option ("Please select Province", ""); for (var i = 0; i < provinces.length i++) {document.creator["province"].options[i+1]=new Option (provinces[i), Provinces[i]); if (document.creator["province"].options[i+1].value==province) {document.creator["province"].selectedindex = I+1;}} }
</script>
<form name=creator>
<select onchange= "initcity ();" Name= "Province" >
<script>creatprovince ();</script>
</select>
<select name= "City" >
<option value= "" > select City </option>
</select>
</form>
</body>
Originally intended to use the loop to generate an array to do the demo, but think, since it is a level two region, it is still a good standard, so that everyone can see clearly, the choice is also clear, although this article is mostly place names ...
