<div class="codetitle"> <span><a style="CURSOR: pointer" data="152" class="copybut" id="copybut152" onclick="doCopy('code152')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code152"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><title>省市两级联动选择</title> <br><style type="text/css"> <br>선택 <br>{ <br>너비: 135px; <br>} <br>fieldset dl dd <br>{ <br>float: 왼쪽; <br>왼쪽 여백: 20px; <br>} <br>fieldset pre <br>{ <br>width: 100%; <br>높이: 400px; <br>overflow-y: 스크롤; <br>overflow-x: 숨김; <br>} <br></style> <br><!-- jQuery库文件引入 --> <br><script language="javascript" type="text/javascript" src="JS/jquery-1.7.1.min.js"></script> <br><script type="text/javascript" language="javascript"> <br>//定义数组，存储省份信息 <br>var province = ["北京", "上海", "天津", "重庆", "浙江", "江苏", "广东", "福建", "湖南", "湖北", "辽宁", <br>"吉林", "黑龙江", "河北", "河南", "山东", "陕西", "甘肃", "新疆", "青海", "山西", "四川", <br>"贵州", "安徽", "江西", "云南", "内蒙古", "西藏", "广西", "宁夏", "海南", "香港", "澳门", "台湾"]; <br><br>//定义数组,存储城市信息 <br>var beijing = ["东城区", "西城区", "海淀区", "朝阳区", "丰台区", "石景山区", "通州区", "顺义区", "房山区", "大兴区", "昌平区", "怀柔区", "平谷区", "门头沟区", "延庆县", "密云县"]; <br>var shanghai = ["浦东新区", "徐汇区", "长宁区", "普陀区", "闸北区", "虹口区", "杨浦区", "黄浦区", "卢湾区", "静安区", "宝山区", "闵行区", "嘉定区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县"]; <br>var tianjing = ["河东", "南开", "河西", "河北", "和平", "红桥", "东丽", "津南", "西青", "北辰", "塘沽", "汉沽", "大港", "蓟县", "宝坻", "宁河", "静海", "武清"]; <br>var chongqing = ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "江津区", "合川区", "永川区", "南川区"]; <br>var jiangsu = ["南京", "无锡", "常州", "徐州", "苏州", "南通", "连云港", "淮安", "扬州", "盐城", "镇江", "泰州", "宿迁"]; <br>var zhejiang = ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "利水"]; <br>var guangdong = ["广州", "韶关", "深圳", "珠海", "汕头", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳"]; <br>var fujiang = ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"]; <br>var hunan = ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西土家苗族自治区"]; <br>var hubei = ["武汉", "襄阳", "黄石", "十堰", "宜昌", "鄂州", "荆门", "孝感", "荆州", "黄冈", "咸宁", "随州", "恩施土家族苗族自治州"]; <br>var liaoning = ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"]; <br>var jilin = ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治区"]; <br>var heilongjiang = ["哈尔滨", "齐齐哈尔", "鸡西", "牡丹江", "佳木斯", "大庆", "伊春", "黑河", "大兴安岭"]; <br>var hebei = ["石家庄", "保定", "唐山", "邯郸", "承德", "廊坊", "衡水", "秦皇岛", "张家口"]; <br>var henan = ["郑州", "洛阳", "商丘", "安阳", "南阳", "开封", "平顶山", "焦作", "新乡", "鹤壁", "许昌", "漯河", "三门峡", "信阳", "周口", "驻马店", "济源"]; <br>var shandong = ["济南", "青岛", "菏泽", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "滨州", "德州", "聊城", "临沂"]; <br>var shangxi = ["西安", "宝鸡", "咸阳", "渭南", "铜川", "延安", "榆林", "汉中", "安康", "商洛"]; <br>var gansu = ["兰州", "嘉峪关", "金昌", "金川", "白银", "天水", "武威", "张掖", "酒泉", "平凉", "庆阳", "定西", "陇南", "临夏", "合作"]; <br>var qinghai = ["西宁", "海东地区", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"]; <br>var xinjiang = ["乌鲁木齐", "奎屯", "石河子", "昌吉", "吐鲁番", "库尔勒", "阿克苏", "喀什", "伊宁", "克拉玛依", "塔城", "哈密", "和田", "阿勒泰", "阿图什", "博乐"]; <br>var shanxi = ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"]; <br>var sichuan = ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"]; <br>var guizhou = ["贵阳", "六盘水", "遵义", "安顺", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "黔东南苗族侗族自治州", "铜仁", "毕节"]; <br>var anhui = ["허페이", "무호", "안칭", "마안산", "푸양", "리우안", "추저우", "쑤저우", "벵부", "차오후", "화이난" ", " Xuancheng", "Bozhou", "Huaibei", "Tongling", "Huangshan", "Chizhou"]; <br>var jiangxi = ["Nanchang", "Jiujiang", "Jingdezhen", "Pingxiang", "Xinyu" ", "Yingtan", "Ganzhou", "Yichun", "Shangrao", "Ji'an", "Fuzhou"]; <br>var yunnan = ["Kunming", "Qujing", "Yuxi" , "보산", "자오퉁", "리장", "푸얼", "린창", "초웅 이족 자치주", "대리바이 자치주", "홍허하니 이족 자치주", "원산좡과 먀오족 자치주", "시솽반나 대 자치주", "더홍 다이 징포 자치주", "누장 리수 자치주", "디칭 티베트 자치주"]; <br>var neimenggu = ["후허하오터", "바오터우" , "Wuhai", "Chifeng", "Tongliao" ", "Ordos", "Hulunbuir", "Bayannur", "Ulanqab"]; <br>var guangxi = ["Nanning", "Liuzhou", "Guilin", "Wuzhou", "Beihai" , "Fangchenggang", "Qinzhou", "Guigang", "Yulin", "Baise", "Hezhou", "Hechi", "Chongzuo"] <br>var xizang = ["Lhasa ", "Chamdo 지역" , "Lingzhi 지역", "Shannan 지역", "Shigatse 지역", "Naqu 지역", "Ngari 지역"]; <br>var ningxia = ["Yinchuan", "Shizuishan", "Wuzhong ", "Guyuan", "中伟"]; <br>var hainan = ["Haikou", "Sanya"]; <br>var xianggang = ["중서부 구역", "완차이 구역", "동부 구역 ", "남부 지구", "구룡시 지구", "야우침몽 지구", "쿤통 지구", "웡타이신 지구", "삼수이포 지구", "북부 지구", "타이포 지구" , "샤틴 구", "사이쿵 구", "위안" 랑 구", "툰문 구", "추엔완 구", "콰이칭 구", "섬 지구"]; <br>var taiwan = [ "타이베이", "가오슝", "지룽", "타이중", "타이난", "신주", "자이"] <br>var aomeng = ["마카오 반도", "타이파 섬", "콜로안 섬" ]; <br><br>//페이지 로딩 방법<br> $(function () { <br>//지방 데이터 설정<br>setProvince(); <br><br>//배경색 설정<br>setBgColor(); <br>}); <br><br><br>//지방 데이터 설정<br>function setProvince() { <br>//지방 드롭다운 목록에 값 할당<br>var option, modelVal; <br>var $sel = $("#selProvince"); <br><br>//해당 주 및 도시 가져오기<br>for (var i = 0, len = Province.length ; i < len; i ) { <BR>modelVal = 지방[i]; <BR>option = "<option value='" modelVal "'>" <br> <br>//선택 요소에 추가<br>$sel.append(option) <br>} <br><br>//변경 이벤트 호출, 초기 도시 정보 <br>provinceChange(); >} <br><br><br>//선택한 지방에 따라 해당 도시를 가져옵니다<br> function setCity(provinec) { <br>var $city = $("#selCity") <br>var proCity, option, modelVal; <br><br>//지방 이름을 통해 지방에 해당하는 도시의 배열 이름을 가져옵니다. <br>switch (provinec) { <br>case "Beijing": <br>proCity = beijing; <br>break; <br>case "상하이": <br>break <br>case "Tianjin": <br>proCity <br> 케이스 "충칭": <br>proCity = 충칭; <br>break; <br>케이스 "Zhejiang": <br>proCity = zhejiang; <br>case "Jiangsu": <br>proCity = jiangsu; <br>case "Guangdong": <br>proCity = guangdong; <br>case "Fujian": <br>proCity = fujiang <br> case "Hunan": <br>proCity = hunan; <br>break <br>case "Hubei": <br>proCity = Hubei <br>case "Liaoning": <br>proCity = 랴오닝; <br>케이스 "길림": <br>break; <br>케이스 "헤이룽장": <br>break; 케이스 "허베이": <br>proCity = 허베이; <br>break; <br>케이스 "허난": <br>proCity = 허난 <br>break; shandong; <br>case "Shaanxi": <br>proCity = shangxi; <br>case "Gansu": <br>proCity = gansu; case "Xinjiang": <br>proCity = xinjiang; <br>break <br>case "Qinghai": <br>proCity = qinghai <br>case "Shanxi": <br>proCity = shanxi; <br>case "Sichuan": <br>break <br>case "Guizhou": <br>proCity <br> case "Anhui": <br>proCity = anhui; <br>break <br>case "Jiangxi": <br>proCity = jiangxi <br>case "Yunnan": <br>proCity = yunnan; <br>케이스 "내몽고": <br>break <br>케이스 "티베트": <br>proCity <br> >case "Guangxi": <br>proCity = guangxi; <br>case "": <br>proCity = xizang; <br>case "Ningxia": <br>proCity = ningxia; <br>case "하이난": <br>break; <br> 케이스 "홍콩": <br>break; >case "마카오": <br>proCity = aomeng; <br>case "대만": <br>proCity = 대만 <br>} <br><br>// 이전에 바인딩된 값을 먼저 지웁니다<br>$city.empty() <br><br>//해당 지방의 도시를 설정<br>for (var i = 0, len = proCity.length; i < len; i ) { <BR>modelVal = proCity[i]; <BR>option = "<option value='" modelVal "'>" modelVal "<br><br>/ /Add<br>$city.append(옵션) <br>} <br><br>//배경 설정<br>setBgColor( ) <br>} <br><br><br>// 지방 선택 이벤트<br>function ProvinceChange() { <br>var $pro = $("#selProvince") <br>setCity($pro .val());<br><br><br>//드롭다운 목록 간격 배경색 설정<br>function setBgColor() { <br>var $option = $("select option:odd") <br>$option .css({ "배경색": "#DEDEDE" }) <br></script> <br></head> ; <br><legend>중국의 3단계 행정 단위 연계</legend> <br><dl> <br><dd> 성: <select id="selProvince" onchange="provinceChange () ;"></select> <br></dd> <br><dd> <br>시(지구): <select id="selCity"></select> <br> </dd> <br></dl> <br></body> <br><br> <br> 다음과 같습니다: <br><br> <br><br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
