Dói tanto que eu encapsule uma cidade secundária e primeiro garanto que há um HTML nela.
<Span style = "background-color: #ffffff; cor: #ff0000"> <select id = "província" size = 1> </select> <select id = "city"> </leclect> <input type = "hidden" id = "pro_city"/> </span>
Em seguida, consulte o JS e finalmente o chama através do new SelectCity (). Estou com preguiça de se separar aqui, então escrevi na página
Não feche o código
<html> <head> <meta charset = "utf-8"> </head> <body> <select id = "província" size = 1> </leclect> <select id = "city"> </leclect> <input type = "hidden" id = "pro_city"/> <script typt = "text/javascript"> selectCity (); } SelectCity.prototype = {init: function () {this.arr = new Array (); this.Proarr = ['Beijing', 'Shanghai', 'Tianjin', 'Chongqing', 'Hebei', 'Shanxi', 'Interior Mongolia ',' Liaoning ',' Jilin ',' Heilongjiang ',' Jiangsu ',' Zhejiang ',' Anhui ',' Fujian ',' Jiangxi ',' Shandong ',' Henan ',' Hubi ',' Huna N ',' 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, Docping, Daxing, pingue, Huir, Huir, Huir, Huir; 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, Liga Ulanqab, Liga Xilingol, Liga Bayannur, Liga Yikezhao"; this.arr [7] = "Shenyang, Dalian, Anshan, Fushun, Benxi, Dandong, Jinzhou, Yingkou, Fuxin, Liaoyang, Panjin, Tieling, Chaoyang, Huludao"; this.arr [8] = "Changchun, Jilin, Siping, Liaoyuan, Tongos, 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, Xuanceng, 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, região de nanning, região de Liuzhou, 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, sudeste 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] = "XING, 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 cidade = document.getElementById ("cidade"); var cityarr = this.arr [0] .split (","); var pro = document.getElementById ("Província"); // inicialize a província de Pequim para (var i = 0; i <this.proarr.length; i ++) {pro [i] = nova opção (this.proarr [i], this.proarr [i]); } // Inicialize a cidade de Pequim para (var i = 0; i <cityarr.length; i ++) {city [i] = nova opção (cityarr [i], cityarr [i]); } this.Handelevent (); }, Handelevent: function () {var _This = this; //Alert(this.arr.20]) var pro = document.getElementById ("Província"); var cidade = document.getElementById ("cidade"); var pro_city = document.getElementById ('pro_city'); pro.onchange = function () {var index = this.selectedIndex; var cityarr = _this.arr [index] .split (","); City.Length = 0; // preenche os valores na matriz da cidade na caixa suspensa da cidade para (var i = 0; i <cityarr.length; i ++) {city [i] = nova opção (cityarr [i], cityarr [i]); }} city.onchange = function () {// Escreva o valor final em uma entrada oculta para personalizar o formato pro_city.value = pro.value+'-'+this.value; alert (pro_city.value)}}} new selectCity (); </script> </body> </html>O exposto acima está o conteúdo inteiro do código de implementação da lista suspensa da cidade de segundo nível JS nativa trazida a você pelo editor. Espero que todos apoiem mais os passos da casa.