2 차 도시를 캡슐화하고 먼저 HTML이 있는지 확인합니다.
<span style = "back
그런 다음 JS를 참조하고 마지막으로 New SelectCity ()를 통해 호출하십시오. 여기서 분리하기에는 너무 게으르기 때문에 페이지에 썼습니다.
코드를 닫지 마십시오
<html> <head> <meta charset = "utf-8"> </head> <body> <select id = "province"size = 1> </select> <select id = "city"> </selep type = "hidden"id = "pro_city"/> <script type = "text/javascript"> function selectCity () {this.init (); } selectCity.Prototype = {init : function () {this.arr = new Array (); this.proarr = [ '베이징', '상하이', '티안진', '충칭', '헤베이', '산시', '내부 몽골 ','리아온 링 (liaoning) ','힐린 ','하일 론즈 앙 (Heilongjiang) ','jiangsu ','zhejiang ','anhui ','fujian ','jiangxi ','shandong ','henan ','hubei ','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, 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, Tongnang, Dazu, Dazu, rongchang, rongchang, bishang, bishang. 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, Bannur 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, Yangjang, Quizyan, Qingyuan, Qingyuan. Yunfu "; this.arr [20] = "Nanning, Liuzhou, Guilin, Wuzhou, Beihai, Fangchenggang, Qinzhou, Guigang, Yulin, Nanning 지역, Liuzhou 지역, Hezhou, Baise, Hechi"; this.arr [21] = "Haikou, Sanya"; this.arr [22] = "Chengdu, Mianyang, Dyang, 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, Jieyuguan, 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] = "홍콩"; 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"); // 베이징 주 초기화 (var i = 0; i <this.proarr.length; i ++) {pro [i] = new 옵션 (this.proarr [i], this.proarr [i]); } // 베이징 도시를 초기화합니다 (var i = 0; i <cityarr.length; i ++) {city [i] = new 옵션 (CityArr [i], CityArr [i]); } this.handelevent (); }, handelevent : function () {var _this = this; //alert(this.arr=]) 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; // 도시 배열의 값을 도시 드롭 다운 상자에 채우십시오 (var i = 0; i <cityarr.length; i ++) {city [i] = new 옵션 (CityArr [i], CityArr [i]); }} city.onchange = function () {// 숨겨진 입력에 최종 값을 작성하여 pro_city.value = pro.value+'-'+this. value 형식을 사용자 정의합니다. alert (pro_city.value)}}} new selectCity (); </script> </body> </html>위는 편집자가 가져온 원시 JS가 캡슐화 된 2 단계 도시 드롭 다운 목록의 구현 코드의 전체 내용입니다. 모두가 풋 스텝 홈을 더 지원하기를 바랍니다.