It hurts so much that I encapsulate a secondary city and first ensure that there is a html in it.
<SPAN style="BACKGROUND-COLOR: #ffffff; COLOR: #ff0000"><select id="province" size=1 > </select> <select id="city"> </select> <input type="hidden" id="pro_city" /></SPAN>
Then refer to js and finally calls it through new SelectCity(). I'm too lazy to separate here, so I wrote it on the page
Don't close the code
<html> <head> <meta charset="UTF-8"> </head> <body> <select id="province" size=1 > </select> <select id="city"> </select> <input type="hidden" id="pro_city" /> <script type="text/javascript"> function SelectCity(){ this.init(); } SelectCity.prototype={ init:function(){ this.arr = new Array(); this.proArr=[ 'Beijing','Shanghai','Tianjin','Chongqing','Hebei','Shanxi','Inner Mongolia','Liaoning','Jilin','Heilongjiang','Jiangsu','Zhejiang','Anhui','Fujian','Jiangxi','Shandong','Henan','Hubei','Hunan','Guangdong','Guangxi','Hainan','Sichuan','Guizhou','Yunnan','Yansu','Shaanxi','Gansu','Ningxia','Qinghai','Xinjiang','Hong Kong','Macau','Taiwan'] this.arr[0 ]="Dongcheng, Xicheng, Chongwen, Xuanwu, Chaoyang, Fengtai, Shijingshan, Haidian, Mentougou, Fangshan, Tongzhou, Shunyi, Changping, Daxing, Pinggu, Huairou, Miyun, Yanqing"; this.arr[1 ]="Huangpu, Luwan, Xuhui, Changning, Jing'an, Putuo, Zhabei, Hongkou, Yangpu, Minhang, Baoshan, Jiading, Pudong, Jinshan, Songjiang, Qingpu, Nanhui, Fengxian, Chongming" ; this.arr[2 ]="Heping, Dongli, Hedong, Xiqing, Hexi, Jinnan, Nankai, Beichen, Hebei, Wuqing, Hongqi, Tanggu, Hangu, Dagang, Ninghe, Jinghai, Baodi, Jixian" ; this.arr[3 ]="Wanzhou, Fuling, Yuzhong, Dadukou, Jiangbei, Shapingba, Jiulongpo, Nan'an, Beibei, Wansheng, Shuangqian, Yubei, Banan, Qianjiang, Changshou, Qijiang, Tongnan, Tongliang, Dazu, Rongchang, Bishan, Liangping, Chengkou, Fengdu, Dianjiang, Wulong, Zhongxian, Kaixian, Yunyang, Fengjie, Wushan, Wuxi, Shizhu, Xiushan, Youyang, Pengshui, Jiangjin, Hechuan, Yongchuan, Nanchuan" ; this.arr[4 ]="Shijiazhuang, Handan, Xingtai, Baoding, Zhangjiakou, Chengde, Langfang, Tangshan, Qinhuangdao, Cangzhou, Hengshui" ; this.arr[5 ]="Taiyuan, Datong, Yangquan, Changzhi, Jincheng, Shuozhou, Luliang, Xinzhou, Jinzhong, Linfen, Yuncheng" ; this.arr[6 ]="Hohhot, Baotou, Wuhai, Chifeng, Hulunbuir League, Alxa League, Zhelim League, Xing'an League, Ulanqab League, Xilingol League, Bayannur League, Yikezhao League" ; this.arr[7 ]="Shenyang, Dalian, Anshan, Fushun, Benxi, Dandong, Jinzhou, Yingkou, Fuxin, Liaoyang, Panjin, Tieling, Chaoyang, Huludao" ; this.arr[8 ]="Changchun, Jilin, Siping, Liaoyuan, Tonghua, Baishan, Songyuan, Baicheng, Yanbian" ; this.arr[9 ]="Harbin, Qiqihar, Mudanjiang, Jiamusi, Daqing, Suihua, Hegang, Jixi, Heihe, Shuangyashan, Yichun, Qitaihe, Daxinganling" ; this.arr[10 ]="Nanjing, Zhenjiang, Suzhou, Nantong, Yangzhou, Yancheng, Xuzhou, Lianyungang, Changzhou, Wuxi, Suqian, Taizhou, Huai'an" ; this.arr[11]="Hangzhou, Ningbo, Wenzhou, Jiaxing, Huzhou, Shaoxing, Jinhua, Quzhou, Zhoushan, Taizhou, Lishui" ; this.arr[12]="Hefei, Wuhu, Bengbu, Ma'anshan, Huaibei, Tongling, Anqing, Huangshan, Chuzhou, Suzhou, Chizhou, Huainan, Chaohu, Fuyang, Lu'an, Xuancheng, Bozhou" ; this.arr[13]="Fuzhou, Xiamen, Putian, Sanming, Quanzhou, Zhangzhou, Nanping, Longyan, Ningde" ; this.arr[14 ]="Nanchang City, Jingdezhen, Jiujiang, Yingtan, Pingxiang, Xinyu, Ganzhou, Ji'an, Yichun, Fuzhou, Shangrao" ; this.arr[15]="Jinan, Qingdao, Zibo, Zaozhuang, Dongying, Yantai, Weifang, Jining, Tai'an, Weihai, Rizhao, Laiwu, Linyi, Dezhou, Liaocheng, Binzhou, Heze" ; this.arr[16]="Zhengzhou, Kaifeng, Luoyang, Pingdingshan, Anyang, Hebi, Xinxiang, Jiaozuo, Puyang, Xuchang, Luohe, Sanmenxia, Nanyang, Shangqiu, Xinyang, Zhoukou, Zhumadian, Jiyuan" ; this.arr[17]="Wuhan, Yichang, Jingzhou, Xiangfan, Huangshi, Jingmen, Huanggang, Shiyan, Enshi, Qianjiang, Tianmen, Xiantao, Suizhou, Xianning, Xiaogan, Ezhou" ; this.arr[18]="Changsha, Changde, Zhuzhou, Xiangtan, Hengyang, Yueyang, Shaoyang, Yiyang, Loudi, Huaihua, Chenzhou, Yongzhou, Xiangxi, Zhangjiajie"; this.arr[19]="Guangzhou, Shenzhen, Zhuhai, Shantou, Dongguan, Zhongshan, Foshan, Shaoguan, Jiangmen, Zhanjiang, Maoming, Zhaoqing, Huizhou, Meizhou, Shanwei, Heyuan, Yangjiang, Qingyuan, Chaozhou, Jieyang, Yunfu"; this.arr[20]="Nanning, Liuzhou, Guilin, Wuzhou, Beihai, Fangchenggang, Qinzhou, Guigang, Yulin, Nanning region, Liuzhou region, Hezhou, Baise, Hechi"; this.arr[21]="Haikou, Sanya"; this.arr[22 ]="Chengdu, Mianyang, Deyang, Zigong, Panzhihua, Guangyuan, Neijiang, Leshan, Nanchong, Yibin, Guang'an, Dachuan, Ya'an, Meishan, Ganzi, Liangshan, Luzhou" ; this.arr[23]="Guiyang, Liupanshui, Zunyi, Anshun, Tongren, Southwest Guizhou, Bijie, Southeast Guizhou" ; this.arr[24]="Kunming, Dali, Qujing, Yuxi, Zhaotong, Chuxiong, Honghe, Wenshan, Simao, Xishuangbanna, Baoshan, Dehong, Lijiang, Nujiang, Diqing, Lincang" ; this.arr[25]="Lhasa, Shigatse, Shannan, Linzhi, Changdu, Ali, Naqu" ; this.arr[26 ]="Xi'an, Baoji, Xianyang, Tongchuan, Weinan, Yan'an, Yulin, Hanzhong, Ankang, Shangluo" ; this.arr[27]="Lanzhou, Jiayuguan, Jinchang, Baiyin, Tianshui, Jiuquan, Zhangye, Wuwei, Dingxi, Longnan, Pingliang, Qingyang, Linxia, Gannan" ; this.arr[28]="Yinchuan, Shizuishan, Wuzhong, Guyuan" ; this.arr[29]="Xining, Haidong, Hainan, Haibei, Huangnan, Yushu, Goluo, Haixi" ; this.arr[30]="Urumqi, Shihezi, Karamay, Yili, Bayingol, Changji, Kizilsu Kirgiz, Bortala, Turpan, Hami, Kashgar, Hotan, Aksu" ; this.arr[31]="Hong Kong" ; this.arr[32 ]="Macao" ; this.arr[33 ]="Taipei, Kaohsiung, Taichung, Tainan, Pingtung, Nantou, Yunlin, Hsinchu, Changhua, Miaoli, Chiayi, Hualien, Taoyuan, Yilan, Keelung, Taitung, Kinmen, Mazu, Penghu"; var city = document.getElementById("city"); var cityArr = this.arr[0].split(","); var pro = document.getElementById("province"); //Initialize Beijing province for(var i=0;i<this.proArr.length;i++) { pro[i]=new Option(this.proArr[i],this.proArr[i]); } //Initialize the Beijing city for(var i=0;i<cityArr.length;i++) { city[i]=new Option(cityArr[i],cityArr[i]); } this.handelEvent(); }, handelEvent:function(){ var _this=this; //alert(this.arr[20]) var pro = document.getElementById("province"); var city = document.getElementById("city"); var pro_city=document.getElementById('pro_city'); pro.onchange=function(){ var index = this.selectedIndex; var cityArr = _this.arr[index].split(","); city.length = 0; //Fill the values in the city array into the city drop-down box for(var i=0;i<cityArr.length;i++) { city[i]=new Option(cityArr[i],cityArr[i]); } } city.onchange=function(){ //Write the final value in a hidden input to customize the format pro_city.value=pro.value+'-'+this.value; alert(pro_city.value) } } } new SelectCity(); </script> </body> </html>The above is the entire content of the implementation code of the native js encapsulated second-level city drop-down list brought to you by the editor. I hope everyone will support Footstep Home more.