Of Stack

JavaScript implements the commonly used second level provincial and municipal drop down list method

  • 2020-05-19 04:10:15
  • OfStack

The example of this article describes the JavaScript implementation of the commonly used level 2 provincial and municipal drop-down list method. Share with you for your reference. The specific analysis is as follows:

The names of the provinces and cities are filled dynamically, and the cities are automatically filled when the provinces are selected 


<!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> Headless document </title> 
</head> 
<body> 
<script type="text/javascript">  
function initcity(city) { 
switch (document.creator["province"].value) { 
case " anhui " : var cityOptions = new Array( " Please select district ", "", " hefei (*)", " hefei ", " anqing ", " anqing ", " bengbu ", " bengbu ", " bozhou ", " bozhou ", " Chaohu lake ", " Chaohu lake ", " chuzhou ", " chuzhou ", " fuyang ", " fuyang ", " Your pool ", " Your pool ", " huaibei ", " huaibei ", " Huai, ", " Huai, ", " huainan ", " huainan ", " huangshan ", " huangshan ", "9 huashan ", "9 huashan ", "6 Ann ", "6 Ann ", " 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 district ", "", " dongcheng ", " dongcheng ", " wl ", " wl ", " chongwen ", " chongwen ", " xuanwu ", " xuanwu ", " The rising sun ", " The rising sun ", " fengtai ", " fengtai ", " shijingshan ", " shijingshan ", " haidian ", " haidian ", " vallely ", " vallely ", " well ", " well ", " 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 district ", "", " wanzhou ", " wanzhou ", " fuling ", " fuling ", " The yuzhong ", " The yuzhong ", " dadukou ", " dadukou ", " jiangbei ", " jiangbei ", " pearls ", " pearls ", "9 Long Po ","9 Long Po ", " On the south bank ", " On the south bank ", " beibei ", " beibei ", " wansheng ", " wansheng ", " Double rest ", " Double rest ", " YuBei ", " YuBei ", " barnum ", " barnum ", " qianjiang ", " qianjiang ", " longevity ", " longevity ", " The qijiang count ", " The qijiang count ", " model.flood-control ", " model.flood-control ", " TongLiang ", " TongLiang ", " Dazu county ", " Dazu county ", " For prosperity ", " For prosperity ", " Wall mount ", " Wall mount ", " liangping ", " liangping ", " where ", " where ", " video ", " video ", " Mat jiang ", " Mat jiang ", " wulong ", " wulong ", " zhongxian ", " zhongxian ", " In kaixian county ", " In kaixian county ", " YunYang ", " YunYang ", " fengjie ", " fengjie ", " wushan ", " wushan ", " WuXi ", " WuXi ", " columns ", " columns ", " mountain ", " mountain ", " Unitary Yang ", " Unitary Yang ", " peng ", " peng ", " metro ", " metro ", " on ", " on ", " yongchuan ", " yongchuan ", " The nanchuan ", " The nanchuan "); break; 
case " fujian " : var cityOptions = new Array( " Please select district ", "", " fuzhou (*)", " fuzhou ", " quoting ", " quoting ", " longyan ", " longyan ", " nanping ", " nanping ", " ningde ", " ningde ", " putian ", " putian ", " quanzhou ", " quanzhou ", "3 Ming ", "3 Ming ", " shaowu ", " shaowu ", " shishi ", " shishi ", " yonhap ", " yonhap ", " Wuyi mountain ", " Wuyi mountain ", " xiamen ", " xiamen ", " zhangzhou ", " zhangzhou "); break; 
case " gansu " : var cityOptions = new Array( " Please select district ", "", " lanzhou (*)", " lanzhou ", " silver ", " silver ", " dingxi ", " dingxi ", " dunhuang ", " dunhuang ", " gannan ", " gannan ", " jinchang ", " jinchang ", " jiuquan ", " jiuquan ", " linxia ", " linxia ", " Of out ", " Of out ", " tianshui ", " tianshui ", " Arms are ", " Arms are ", " wuwei ", " wuwei ", " xifeng ", " xifeng ", " Zhang ye ", " Zhang ye "); break; 
case " guangdong " : var cityOptions = new Array( " Please select district ", "", " 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 ", " The Germany ", " The Germany ", " yunfu ", " yunfu ", " zengcheng ", " zengcheng ", " zhanjiang ", " zhanjiang ", " zhaoqing ", " zhaoqing ", " zhongshan ", " zhongshan ", " zhuhai ", " zhuhai "); break; 
case " guangxi " : var cityOptions = new Array( " Please select district ", "", " nanning (*)", " nanning ", " The baise ", " The baise ", " The north sea ", " The north sea ", " guilin ", " guilin ", " fangchenggang ", " fangchenggang ", " hechi ", " hechi ", " Congratulation state ", " Congratulation state ", " liuzhou ", " liuzhou ", " qinzhou ", " qinzhou ", " wuzhou ", " wuzhou ", " yulin ", " yulin "); break; 
case " guizhou " : var cityOptions = new Array( " Please select district ", "", " guiyang (*)", " guiyang ", " anshun ", " anshun ", " bijie ", " bijie ", " DouYun ", " DouYun ", " Carey ", " Carey ", "6 Plate of water ", "6 Plate of water ", " tongren ", " tongren ", " xingyi ", " xingyi ", " Jade screen ", " Jade screen ", " zunyi ", " zunyi "); break; 
case " hainan " : var cityOptions = new Array( " Please select district ", "", " haikou (*)", " haikou ", " During the county ", " During the county ", " lingshui ", " lingshui ", " qionghai ", " qionghai ", "3 the ", "3 the ", " TongShen ", " TongShen ", " mannings ", " mannings "); break; 
case " hebei " : var cityOptions = new Array( " Please select district ", "", " shijiazhuang (*)", " shijiazhuang ", " baoding ", " baoding ", " beidaihe ", " beidaihe ", " cangzhou ", " cangzhou ", " chengde ", " chengde ", " rich ", " rich ", " handan ", " handan ", " hengshui ", " hengshui ", " langfang ", " langfang ", " nandaihe ", " nandaihe ", " qinhuangdao ", " qinhuangdao ", " tangshan ", " tangshan ", " The new town ", " The new town ", " xingtai ", " xingtai ", " zhangjiakou ", " zhangjiakou "); break; 
case " heilongjiang " : var cityOptions = new Array( " Please select district ", "", " Harbin (*)", " Harbin ", " So soon ", " So soon ", " daqing ", " daqing ", " Greater hinggan mountains ", " Greater hinggan mountains ", " hegang ", " hegang ", " Heihe river ", " Heihe river ", " jiamusi ", " jiamusi ", " jixi ", " jixi ", " mudanjiang ", " mudanjiang ", " qiqihar ", " qiqihar ", "7 A river ", "7 A river ", " shuangyashan ", " shuangyashan ", " That is suihua ", " That is suihua ", " yichun ", " yichun "); break; 
case " henan " : var cityOptions = new Array( " Please select district ", "", " zhengzhou (*)", " zhengzhou ", " anyang ", " anyang ", " hebi ", " hebi ", " HuangChuan ", " HuangChuan ", " jiaozuo ", " jiaozuo ", " jiyuan ", " jiyuan ", " kaifeng ", " kaifeng ", " Luo river ", " Luo river ", " luoyang ", " luoyang ", " nanyang ", " nanyang ", " pingdingshan ", " pingdingshan ", " puyang ", " puyang ", "3 Gate gorge ", "3 Gate gorge ", " shangqiu ", " shangqiu ", " xinxiang ", " xinxiang ", " xinyang ", " xinyang ", " xuchang ", " xuchang ", " zhoukou ", " zhoukou ", " zhumadian ", " zhumadian "); break; 
case " Hong Kong " : var cityOptions = new Array( " Please select district ", "", " Hong Kong ", " Hong Kong ", "9 dragon ", "9 dragon ", " The New Territories ", " The New Territories "); break; 
case " hubei " : var cityOptions = new Array( " Please select district ", "", " wuhan (*)", " wuhan ", " enshi ", " enshi ", " ezhou ", " ezhou ", " huanggang ", " huanggang ", " Yellowstone ", " Yellowstone ", " jingmen ", " jingmen ", " jingzhou ", " jingzhou ", " qianjiang ", " qianjiang ", "10 weir ", "10 weir ", " suizhou ", " suizhou ", " Wu Xue ", " Wu Xue ", " xiantao ", " xiantao ", " xianning ", " xianning ", " xiangyang ", " xiangyang ", " xiangfan ", " xiangfan ", " xiaogan ", " xiaogan ", " yichang ", " yichang "); break; 
case " hunan " : var cityOptions = new Array( " Please select district ", "", " changsha (*)", " changsha ", " changde ", " changde ", " chenzhou ", " chenzhou ", " hengyang ", " hengyang ", " Which is ", " Which is ", " 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 district ", "", " nanjing (*)", " nanjing ", " changshu ", " changshu ", " changzhou ", " changzhou ", " haimen ", " haimen ", " huaian ", " huaian ", " jiangdu ", " jiangdu ", " jiangyin ", " jiangyin ", " kunshan ", " kunshan ", " lianyungang ", " lianyungang ", " nantong ", " nantong ", " qidong ", " qidong ", " ShuYang ", " ShuYang ", " suqian ", " suqian ", " suzhou ", " suzhou ", " taicang ", " taicang ", " taizhou ", " taizhou ", " tongli ", " tongli ", " 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 district ", "", " nanchang (*)", " nanchang ", " fuzhou ", " fuzhou ", " ganzhou ", " ganzhou ", " gian ", " gian ", " jingdezhen ", " jingdezhen ", " jinggangshan ", " jinggangshan ", "9 jiang ", "9 jiang ", " lushan ", " lushan ", " pingxiang ", " pingxiang ", " shangrao ", " shangrao ", " at ", " at ", " yichun ", " yichun ", " yingtan ", " yingtan "); break; 
case " Ji Lin " : var cityOptions = new Array( " Please select district ", "", " changchun (*)", " changchun ", " baicheng ", " baicheng ", " baishan ", " baishan ", " hunchun ", " hunchun ", " long-withering ", " long-withering ", " MeiHe ", " MeiHe ", " Ji Lin ", " Ji Lin ", "4 flat ", "4 flat ", " matsubara ", " matsubara ", " tonghua ", " tonghua ", " Yenji, ", " Yenji, "); break; 
case " liaoning " : var cityOptions = new Array( " Please select district ", "", " shenyang (*)", " shenyang ", " anshan ", " anshan ", " benxi ", " benxi ", " The rising sun ", " The rising sun ", " dalian ", " dalian ", " dandong ", " dandong ", " fushun ", " fushun ", " fuxin ", " fuxin ", " huludao ", " huludao ", " jinzhou ", " jinzhou ", " liaoyang ", " liaoyang ", " Set up a file ", " Set up a file ", " tieling ", " tieling ", " yingkou ", " yingkou "); break; 
case " Macau " : var cityOptions = new Array( " Please select district ", "", " Macau ", " Macau "); break; 
case " Inner Mongolia " : var cityOptions = new Array( " Please select district ", "", " Hohhot, (*)", " Hohhot, ", " La shan au ", " La shan au ", " baotou ", " baotou ", " chifeng ", " chifeng ", " dongsheng ", " dongsheng ", " hailar ", " hailar ", " JiNing ", " JiNing ", " linhe ", " linhe ", " tgo ", " tgo ", " The wuhai ", " The wuhai ", " ulanhot ", " ulanhot ", " Tin event, ", " Tin event, "); break; 
case " ningxia " : var cityOptions = new Array( " Please select district ", "", " yinchuan (*)", " yinchuan ", " Solid source ", " Solid source ", " making ", " making ", " hui ", " hui "); break; 
case " qinghai " : var cityOptions = new Array( " Please select district ", "", " xining (*)", " xining ", " DE to ha ", " DE to ha ", " golmud ", " golmud ", " republican ", " republican ", " Whereas haidong539 ", " Whereas haidong539 ", " Taking the sea ", " Taking the sea ", " M ooze ", " M ooze ", " My colleagues ", " My colleagues ", " yushu ", " yushu "); break; 
case " shandong " : var cityOptions = new Array( " Please select district ", "", " jinan (*)", " jinan ", " binzhou ", " binzhou ", " yanzhou ", " yanzhou ", " Texas ", " Texas ", " 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 district ", "", " chongming ", " chongming ", " huangpu ", " huangpu ", " Shanghai luwan ", " Shanghai luwan ", " xuhui ", " xuhui ", " changning ", " changning ", " Jing 'an ", " Jing 'an ", " putuo ", " putuo ", " zhabei ", " zhabei ", " hongkou ", " hongkou ", " yangpu ", " yangpu ", " minhang ", " minhang ", " baoshan ", " baoshan ", " jiading ", " jiading ", " In the pudong new area ", " In the pudong new area ", " jinshan ", " jinshan ", " songjiang ", " songjiang ", " qingpu ", " qingpu ", " nanhui ", " nanhui ", " fengxian ", " fengxian "); break; 
case " shanxi " : var cityOptions = new Array( " Please select district ", "", " taiyuan (*)", " taiyuan ", " changzhi ", " changzhi ", " datong ", " datong ", " Hou ma ", " Hou ma ", " jincheng ", " jincheng ", " lishi ", " lishi ", " linfen ", " linfen ", " NingWu ", " NingWu ", " It is mined here ", " It is mined here ", " xinzhou ", " xinzhou ", " yangquan ", " yangquan ", " quality ", " quality ", " yuncheng ", " yuncheng "); break; 
case " shaanxi " : var cityOptions = new Array( " Please select district ", "", " Xi 'an (*)", " Xi 'an ", " ankang ", " ankang ", " baoji ", " baoji ", " Hanzhong city ", " Hanzhong city ", " weinan ", " weinan ", " bakeries ", " bakeries ", " suide ", " suide ", " tongchuan ", " tongchuan ", " xianyang ", " xianyang ", " yanan ", " yanan ", " Yulin. ", " Yulin. "); break; 
case "4 sichuan " : var cityOptions = new Array( " Please select district ", "", " chengdu (*)", " chengdu ", " pakistan-china ", " pakistan-china ", " DaChuan ", " DaChuan ", " deyang ", " deyang ", " dujiangyan ", " dujiangyan ", " Mount emei ", " Mount emei ", " fuling ", " fuling ", " cross ", " cross ", " guangyuan ", " guangyuan ", "9 The village ditch ", "9 The village ditch ", " kangding ", " kangding ", " leshan ", " leshan ", " luzhou ", " luzhou ", " barkam ", " barkam ", " mianyang ", " mianyang ", " meishan ", " meishan ", " nanchong ", " nanchong ", " neijiang ", " neijiang ", " panzhihua ", " panzhihua ", " suining ", " suining ", " wenchuan ", " wenchuan ", " xichang ", " xichang ", " ya ", " ya ", " yibin ", " yibin ", " zigong ", " zigong ", " great ", " great "); break; 
case " Taiwan " : var cityOptions = new Array( " Please select district ", "", " Taipei (*)", " Taipei ", " keelung ", " keelung ", " tainan ", " tainan ", " taichung ", " taichung ", " Geohiong (kaohsiung) ", " Geohiong (kaohsiung) ", " pingtung ", " pingtung ", " nantou ", " nantou ", " yunlin ", " yunlin ", " hsinchu ", " hsinchu ", " changhua ", " changhua ", " miaoli ", " miaoli ", " chiayi ", " chiayi ", " Hualien ", " Hualien ", " taoyuan ", " taoyuan ", " ilan ", " ilan ", " taitung ", " taitung ", " The golden gate ", " The golden gate ", " matsu ", " matsu ", " penghu ", " penghu "); break; 
case " tianjin " : var cityOptions = new Array( " Please select district ", "", " tianjin ", " tianjin ", " peace ", " peace ", " toray ", " toray ", " hedong ", " hedong ", " West green ", " West green ", " hexi ", " hexi ", " jinnan ", " jinnan ", " nankai ", " nankai ", " beichen ", " beichen ", " hebei ", " hebei ", " qing ", " qing ", " Red rest ", " Red rest ", " tanggu ", " tanggu ", " hangu ", " hangu ", " dagang ", " dagang ", " NingHe ", " NingHe ", " The sea of tranquility ", " The sea of tranquility ", " baodi ", " baodi ", " jixian ", " jixian " ); break; 
case " xinjiang " : var cityOptions = new Array( " Please select district ", "", " urumqi (*)", " urumqi ", " aksu ", " aksu ", " altay ", " altay ", " What figure o ", " What figure o ", " Bo le ", " Bo le ", " changji ", " changji ", " dongshan ", " dongshan ", " hami ", " hami ", " hetian ", " hetian ", " kashgar ", " kashgar ", " karamay ", " karamay ", " kuqa ", " kuqa ", " korla ", " korla ", " kuytun ", " kuytun ", " shihezi ", " shihezi ", " Tacheng prefecture ", " Tacheng prefecture ", " turpan ", " turpan ", " yining ", " yining "); break; 
case " Tibet " : var cityOptions = new Array( " Please select district ", "", " Lhasa (*)", " Lhasa ", " Ali. ", " Ali. ", " changdu ", " changdu ", " nyingchi ", " nyingchi ", " naqu ", " naqu ", " xigaze ", " xigaze ", " shannan ", " shannan "); break; 
case " yunnan " : var cityOptions = new Array( " Please select district ", "", " kunming (*)", " kunming ", " Dali ", " Dali ", " baoshan ", " baoshan ", " chuxiong ", " chuxiong ", " Dali ", " Dali ", " dongchuan ", " dongchuan ", " An old ", " An old ", " jinghong ", " jinghong ", " Pull away ", " Pull away ", " lincang ", " lincang ", " lijiang ", " lijiang ", "6 library ", "6 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 district ", "", " hangzhou (*)", " hangzhou ", " anji ", " anji ", " cixi ", " cixi ", " dinghai ", " dinghai ", " fenghua ", " fenghua ", " Sea salt ", " Sea salt ", " huangyan ", " huangyan ", " huzhou ", " huzhou ", " jiaxing ", " jiaxing ", " jinhua ", " jinhua ", " linan ", " linan ", " linhai ", " linhai ", " lishui ", " lishui ", " ningbo ", " ningbo ", " ouhai ", " ouhai ", " pinghu ", " pinghu ", " Thousand island lake ", " Thousand island lake ", " quzhou ", " quzhou ", " jiangshan ", " jiangshan ", " Ryan ", " Ryan ", " shaoxing ", " shaoxing ", " shengzhou ", " shengzhou ", " taizhou ", " taizhou ", " possessing ", " possessing ", " wenzhou ", " wenzhou ", " yuyao ", " yuyao ", " zhoushan ", " zhoushan "); break; 
case " overseas " : var cityOptions = new Array( " Please select district ", "", " The European ", " The European ", " In North America ", " In North America ", " South America ", " South America ", " Asia ", " Asia ", " Africa ", " Africa ", " Oceania ", " Oceania "); break; default: var cityOptions = new Array(" Please select district ", ""); 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 ", " Ji Lin ", " liaoning ", " Macau ", " Inner Mongolia ", " ningxia ", " qinghai ", " shandong ", " shanxi ", " shaanxi ", "4 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 the city </option> 
</select> 
</form> 
</body> 
</html>

I hope this article has been helpful to your javascript programming.

Related articles: