<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>フィールドセット dl dd <br>{ <br>float: left; <br>マージン左: 20px; <br>} <br>フィールドセット前 <br>{ <br>幅: 100%; <br>高さ: 400ピクセル; <br>オーバーフロー-y: スクロール; <br>オーバーフロー-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 = ["合肥", "蕪湖", "安慶", "馬鞍山", "阜陽", "六安", "滁州", "宿州", "蚌埠", "巢湖", "淮南", "宣城", "亳州", "淮北", "銅陵", "黃山", "池州"]; <br>var jiangxi = ["南昌", "九江", "景德鎮", "萍鄉", "新餘", "鷹潭", "贛州", "宜春", "上饒", "吉安", "撫州"]; <br>var yunnan = ["昆明", "曲靖", "玉溪", "保山", "昭通", "麗江", "普洱", "臨滄", "楚雄彝族自治州", "大理白族自治州", "紅河哈尼族彝族自治州", "文山壯族苗族自治州", "西雙版納傣族自治州", "德宏傣族景頗族自治州", "怒江傈僳族自治州", "迪慶藏族自治州"]; <br>var neimenggu = ["呼和浩特", "包頭", "烏海", "赤峰", "通遼峰", "鄂爾多斯", "呼倫貝爾", "巴彥淖爾", "烏蘭察布"]; <br>var guangxi = ["南寧", "柳州", "桂林", "梧州", "北海" , "防城港", "欽州", "貴港", "玉林", "百色", "賀州", "河池", "崇左"]; <br>var xizang = ["拉薩", "昌都地區" , "林芝地區", "山南地區", "日喀則地區", "那曲地區", "阿里地區"]; <br>var ningxia = ["銀川", "石嘴山", "吳忠", "固原", "中衛"]; <br>var hainan = ["海口", "三亞"]; <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 modelVal = province[i]; <br>option = "<option value='" modelVal "'>" modelVal "</option>"; <br><br>//加入select 元素<br>$sel.append(option); <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br><br>//呼叫change事件，初始城市資訊<br>provinceChange(); <br>} <br><br><br>//根據選取的省份取得對應的城市<br>function setCity(provinec ) { <br>var $city = $("#selCity"); <br>var proCity, option, modelVal; <br><br>//透過省份名稱，取得省份對應城市的陣列名稱<br>switch (provinec) { <br>case "北京": <br>proCity = beijing; <br>break; <br>case "上海": <br>proCity = shanghai; <br>break; <br>case "天津": <br>proCity = tianjing; <br>break; <br>case "重慶": <br>proCity = chongqing; <br>break; <br>case "浙江": <br>proCity = zheji>proCity = zheji> 🎜>break; <br>case "江蘇": <br>proCity = jiangsu; <br>break; <br>case "廣東": <br>proCity = guangdong; <br>breakase <br> "ase <br> "ase; ": <br>proCity = fujiang; <br>break; <br>case "湖南": <br>proCity = hunan; <br>break; <br>case "湖北": <br>proCity = hubei; 🎜>break; <br>case "遼寧": <br>proCity = liaoning; <br>break; <br>case "吉林": <br>proCity = jilin; <br>breakase <br>breakase <br>」江龍; ": <br>proCity = heilongjiang; <br>break; <br>case "河北": <br>proCity = hebei; <br>break; <br>case "河南": <br>proCity = henan; 🎜>break; <br>case "山東": <br>proCity = shandong; <br>break; <br>case "陝西": <br>proCity = shangxi; <br>break ; ; ": <br>proCity = gansu; <br>break; <br>case "新疆": <br>proCity = xinjiang; <br>break; <br>case "青海": <br>proCity = qinghai; 🎜>break; <br>case "山西": <br>proCity = shanxi; <br>break; <br>case "四川": <br>proCity = sichuan; <br>break <br>; <br>; ": <br>proCity = guizhou; <br>break; <br>case "安徽": <br>proCity = anhui; <br>break; <br>case "江西": <br>proCity = jiang; 🎜>break; <br>case "雲南": <br>proCity = yunnan; <br>break; <br>case "內蒙古": <br>proCity = neimenggu; <br>break; ": <br>proCity = xizang; <br>break; <br>case "廣西": <br>proCity = guangxi; <br>break; <br>case "": <br>proCity = xizang; >break; <br>case "寧夏": <br>proCity = ningxia; <br>break; <br>case "海南": <br>proCity = hainan; <br>break; <br>case "🎜>case "A" : <br>proCity = xianggang; <br>break; <br>case "澳門": <br>proCity = aomeng; <br>break; <br>case "台灣": <br>proCity = taiwan; >break; <br>} <br><br>//先清空之前綁定的值<br>$city.empty(); <br><br>//設定對應省份的城市<br>for ( var i = 0, len = proCity.length; i modelVal = proCity[i]; <br>option = "<option value='" modelVal "'>" modelVal "</option>"; <br><br>//新增<br>$city.append(option); <br>} <br><br>//設定背景<br>setBgColor(); <br>} <br><br><br>//省選中事件<br>function provinceChange() { <br>var $pro = $("#selProvince"); <br>setCity($pro.val()); <br>}<br><br><br>//設定下拉清單間隔背景樣色<br>function setBgColor() { <br>var $option = $("select option:odd"); <br>$option.css ({ "background-color": "#DEDEDE" }); <br>} <br> <br> <br> <br><fieldset> <br><legend>中國三級行政單位連動</legend> <br><dl> <br><dd> <br>省：<select id="selProvince" onchange="provinceChange();"></select> <br> </dd> <br><dd> <br>市(區)：<select id="selCity"></select> <br> </dd> <br> </dl> <br> fieldset> <br> <br> </fieldset> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
