This example shares the specific code for JS to implement the secondary linkage drop-down menu for your reference. The specific content is as follows
js code part:
/** National Second-level City Linkage js Version*/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]); }//end for if(v){ options[0].selected = true; } } }//end if v if(++v<s.length){change(v);} }//End with}var dsy = new Dsy();dsy.add("0",["Beijing","Tianjin","Shanghai","Chongqing","Hebei","Shanxi","Inner Mongolia","Liaoning","Jilin","Heilongjiang","Jiangsu","Zhejiang","Anhui","Fujian","Jiangxi","Shandong","Heinan","Hubei","Hunan","Guangdong","Guangxi","Hainan","Sichuan","Guizhou","Yunnan","Yunnan","Yunnan","Yunnan","Yunnan","Tibet","Shaanxi","Gansu","Qinghai","Ningxia","Xinxia","Hong Kong","Macao","Taiwan Province"]);dsy.add("0_0",["Dongcheng District"," Xicheng District", "Chongwen District", "Xuanwu District", "Chaoyang District", "Fengtai District", "Shijingshan District", "Haidian District", "Mentougou District", "Fangshan District", "Tongzhou District", "Shunyi District", "Changping District", "Daxing District", "Huairou District", "Pinggu District", "Miyun County", "Yanqing County", "Yanqing Town"]); dsy.add("0_1",["Heping District", "Hedong District", "Hexi District", "Nankai District", "Hebei District", "Hongqiao District", "Tanggu District", "Hangu District", "Dagang District", "Dongli District", "Xiqing District", "Jinnan District", "Beichen District", "Wuqing District", "Baodie District", "Ji County", "Ninghe County", "Lutai Town", "Jinghai County", "Jinghai Town "]);dsy.add("0_2",["Huangpu District","Luwan District","Xuhui District","Changning District","Jing'an District","Putuo District","Zhabei District","Hongkou District","Yangpu District","Minhang District","Baoding District","Baoding District","Baoding District","Jinshan District","Songjiang District","Qingpu District","Nanhui District","Fengxian District","Chongming County","Chengqiao Town"]);dsy.add("0_3",["Yuzhong District","Dadoukou District","Jiangbei District","Shapingba District","Jiulongpo District","Nan's District","Nan's District","Shapingba District","Jiulongpo District","Nan's District","Nan's District","Nan's District","Fuling District","Qianjiang District" ,"Changshou District","Hechuan City","Yongchuan City","Jijin City","Nanchuan City","Qijiang County","Tongnan County","Tongliang County","Dazu County","Rongchang County","Bishan County","Dianjiang County","Wulong County","Fengdu County","Chengkou County","Liangping County","Kai County","Wuxi County","Wushan County","Fengjie County","Yunyang County","Zhong County","Shizhu Tujia Autonomous County","Pengshui Miao Tujia Autonomous County","Youyang Tujia Miao Autonomous County","Xiushan Tujia Miao Autonomous County"]);dsy.add("0_4",["Shijiazhuang City","Zhangjiakou City","Chengde City","Qinhuangdao City","Tangshan City","Langfang City","Baoding City" ,"Hengshui City","Cangzhou City","Xingtai City","Handan City"]);dsy.add("0_5",["Taiyuan City","Shuozhou City","Datong City","Yangquan City","Changzhi City","Jin City","Xinzhou City","Jinzhong City","Linfen City","Luliang City","Yun City"]);dsy.add("0_6",["Hohhot City","Baotou City","Wuhai City","Chifeng City","Tongliao City","Hurundai City","Ordos City","Ulanqab City","Bayannur City","Xing'an League","Xilingol League","Alxa League"]);dsy.add("0_7",["Shenyang City","Chaoyang City","Fuxin City ","Teling City","Fushun City","Benxi City","Liaoyang City","Anshan City","Dandong City","Dalian City","Yingkou City","Panjin City","Jinzhou City","Huludao City"]);dsy.add("0_8",["Changchun City","Baicheng City","Songyuan City","Jilin City","Siping City","Liaoyuan City","Tonghua City","Baishan City","Yanbian Prefecture"]);dsy.add("0_9",["Harbin City","Qiqihar City","Qitaihe City","Heihe City","Daqing City","Hegang City","Yichun City","Jiamusi City","Shuangyashan City","Jixi City","Mudanjiang City","Suihua City","Daxinganling Area "]);dsy.add("0_10",["Nanjing","Xuzhou","Lianyungang","Suqian","Hui'an","Yanzhou","Yangzhou","Taizhou","Nantong","Zhenjiang","Changzhou","Wuxi","Suzhou"]]);dsy.add("0_11",["Hangzhou","Huzhou","Jiaxing","Zhoushan","Ningbo","Shaoxing","Quzhou","Jinhua","Taizhou","Wenzhou","Lishui"]);dsy.add("0_12",["Hefei","Suzhou","Huaibei","Bozhou","Fuyang","Bengbu","Huainan", "Chuzhou City", "Ma'anshan City", "Wuhu City", "Tongling City", "Anqing City", "Huangshan City", "Lu'an City", "Chaohu City", "Chizhou City", "Xuan City"]);dsy.add("0_13",["Fuzhou City", "Nanping City", "Putian City", "Sanming City", "Quanzhou City", "Xiamen City", "Zhangzhou City", "Longyan City", "Ningde City"]);dsy.add("0_14",["Nanchang City", "Jiangde City", "Jingdezhen City", "Yingtan City", "Xinyu City", "Pingxiang City", "Ganzhou City", "Shangrao City", "Fuzhou City", "Yichun City", "Jian City"]);dsy.add("0_15",["Jinan City"," Qingdao City", "Liaocheng City", "Dezhou City", "Dongying City", "Zibo City", "Weifang City", "Yantai City", "Weihai City", "Rizhao City", "Linyi City", "Zaozhuang City", "Jining City", "Tai'an City", "Laiwu City", "Binzhou City", "Heze City"]);dsy.add("0_16",["Zhengzhou City", "Kaifeng City", "Sanmenxia City", "Luoyang City", "Jiazuo City", "Xinxiang City", "Hebi City", "Anyang City", "Puyang City", "Shangqiu City", "Xuchang City", "Luohe City", "Pingdingshan City", "Nanyang City", "Xinyang City", "Xinyang City", "Zhoukou City", "Zhumadian City", "Jiyuan City"]);dsy.add("0_17",[ "Wuhan City", "Shiyan City", "Xiangfan City", "Jingmen City", "Xiaogan City", "Huanggang City", "Ezhou City", "Huangshi City", "Xianning City", "Jingzhou City", "Yichang City", "Suizhou City", "Provincially-level administrative unit", "Enshi Prefecture"]);dsy.add("0_18",["Changsha City", "Zhangjiajie City", "Changde City", "Yiyang City", "Yueyang City", "Zhuzhou City", "Xiangtan City", "Chenzhou City", "Yongzhou City", "Shaoyang City", "Huaihua City", "Loudi City", "Xiangxi Prefecture"]);dsy.add("0_19",["Guangzhou City", "Shenzhen City", "Qingyuan City", "Shaoguan City", "Heyuan City", "Mei Zhou City", "Chaozhou City", "Shantou City", "Jieyang City", "Shanwei City", "Huizhou City", "Dongguan City", "Zhuhai City", "Zhongshan City", "Jiangmen City", "Foshan City", "Zhaoqing City", "Yunfu City", "Yangjiang City", "Maoming City", "Zhanjiang City"]);dsy.add("0_20",["Nanning City", "Guilin City", "Liuzhou City", "Wuzhou City", "Guigang City", "Yulin City", "Yulin City", "Qinzhou City", "Beihai City", "Fangchenggang City", "Chongzuo City", "Baise City", "Hechi City", "Laibin City", "Hezhou City"]);dsy.add("0_21",["Haikou City", "Sanya City", "Provincial Administrative Unit"]);dsy.add("0_21",["Haikou City", "Sanya City", "Provincial Administrative Unit"]);dsy. add("0_22",["Chengdu City","Guangyuan City","Mianyang City","Deyang City","Nanchong City","Guang'an City","Suining City","Neijiang City","Leshan City","Zigong City","Luzhou City","Yibin City","Panzhihua City","Bazhong City","Dazhou City","Ziyang City","Meishan City","Ya'an City","Aba City","Ganzi City","Liu Panshui City","Zunyi City","Anshun City","Bijie District","Tongren District","Qiandongnan Prefecture","Qianxi Prefecture","Qianxi Prefecture"]);dsy.add("0_24",["Kunming City","Qujing city","Yuxi city","Baoshan city","Zhaotong city","Lijiang city","Simao city","Lincang city","Dehong city","Nujiang city","Diqing city","Dali city","Daiqing city","Chuxiong city","Honghe city","Wenshan city","Xishuangbanna city"]);dsy.add("0_25",["Lhasa city","Naqu area","Changdu area","Linzhi area","Shannan area","Shigatse area","Ali area"]);dsy.add("0_26",["Xi'an city","Yan'an city","Tongchuan city","Weinan city","Xianyang city","Baoji city","Hanzhong city","Yulin city","Ankang city","Shangluo city"]);dsy.add ("0_27",["Lanzhou City","Jiayuguan City","Baiyin City","Tianshui City","Wuwei City","Jiuquan City","Zhangye City","Qingyang City","Pingliang City","Dingxi City","Longnan City","Linxia City","Gannan City"]);dsy.add("0_28",["Xining City","Haidong District","Haibei Prefecture","Hainan Prefecture","Huangnan Prefecture","Goluo Prefecture","Yushu Prefecture","Haixi Prefecture"]);dsy.add("0_29",["Yinchuan City","Shizuishan City","Wuzhong City","Guyuan City"Zhongwei City"]);dsy.add("0_30",["Urumqi City","Karamay City","Autonomous Region Direct Administrative units at the county level", "Kashgar region", "Aksu region", "Hotan region", "Turpan region", "Hami region", "Kizilsuke Prefecture", "Bortala Prefecture", "Changji Prefecture", "Bainguoleng Prefecture", "Ili Prefecture", "Tacheng Prefecture", "Altay Region"]);dsy.add("0_31",["Hong Kong Special Administrative Region"]);dsy.add("0_32",["Macao Special Administrative Region"]);dsy.add("0_33",["Taipei", "Taichung", "Huali", "Keilung", "Chiayi", "Lianjiang", "Miaoli", "Nantou", "Penghu", "Pingtung", "Taitung", "Tainan", Taoyuan", "Hsinchu", "Yilan", "Yunlin", "Changhua"]);dsy.add("0",["Beijing", "Tianjin", "Shanghai", "Chongqing", "Hebei", "Shanxi", "Inner Mongolia", "Liaoning", "Jiangsu", "Jiangsu", "Zhejiang", "Anhui", "Fujian", "Jiangxi", "Shandong", "Heinan", "Hubei", "Hunan", "Guangdong", "Guangxi", "Hainan", "Sichuan", "Guizhou", "Yunnan", "Yunnan", "Tibet", "Shaanxi", "Gansu", "Qinghai", "Ningxia", "Xinjiang", "Hong Kong", "Macao", "Taiwan Province"]);var s=["s_province","s_city"];//The namevar of three selects opt0 = ["Province","prefecture-level city"];//Initial value function _init_area(){ //Initialization function for(i=0;i<s.length-1;i++){ document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); } change(0);}html code part:
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>National second-level linkage</title><style type="text/css">body{ background:#EEEEEE;margin:0; padding:0; font-family:"Microsoft Yahei", Arial, Helvetica, sans-serif; }a{ color:#006600; text-decoration:none;}a:hover{color:#990000;}.top{ margin:5px auto; color:#990000; text-align:center;}.info select{ border:1px #993300 solid; background:#FFFFF;}.info{ margin:5px; text-align:center;}.info #show{ color:#3399FF; }.bottom{ text-align:right; font-size:12px; color:#CCCC; width:1000px;}</style></head><body><div> <h1>National second-level linkage</h1></div><div> <div> <select id="s_province" name="s_province"></select> <select id="s_city" name="s_city" ></select> <script src="area.js" type="text/javascript"></script> <script type="text/javascript">_init_area();</script> </div></div></body></html>The above is all about this article, I hope it will be helpful to everyone's learning.