jQuery Chinese province and city two-level linkage selection attached picture_jquery

Copy code The code is as follows: 省市两级联动选择 select { width: 135px; } fieldset dl dd { float: left; margin-left: 20px; } fieldset pre { width: 100%; height: 400px; overflow-y: scroll; overflow-x: hidden; } //定义数组，存储省份信息 var province = ["北京", "上海", "天津", "重庆", "浙江", "江苏", "广东", "福建", "湖南", "湖北", "辽宁", "吉林", "黑龙江", "河北", "河南", "山东", "陕西", "甘肃", "新疆", "青海", "山西", "四川", "贵州", "安徽", "江西", "云南", "内蒙古", "西藏", "广西", "宁夏", "海南", "香港", "澳门", "台湾"]; //定义数组,存储城市信息 var beijing = ["东城区", "西城区", "海淀区", "朝阳区", "丰台区", "石景山区", "通州区", "顺义区", "房山区", "大兴区", "昌平区", "怀柔区", "平谷区", "门头沟区", "延庆县", "密云县"]; var shanghai = ["浦东新区", "徐汇区", "长宁区", "普陀区", "闸北区", "虹口区", "杨浦区", "黄浦区", "卢湾区", "静安区", "宝山区", "闵行区", "嘉定区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县"]; var tianjing = ["河东", "南开", "河西", "河北", "和平", "红桥", "东丽", "津南", "西青", "北辰", "塘沽", "汉沽", "大港", "蓟县", "宝坻", "宁河", "静海", "武清"]; var chongqing = ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "江津区", "合川区", "永川区", "南川区"]; var jiangsu = ["南京", "无锡", "常州", "徐州", "苏州", "南通", "连云港", "淮安", "扬州", "盐城", "镇江", "泰州", "宿迁"]; var zhejiang = ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "利水"]; var guangdong = ["广州", "韶关", "深圳", "珠海", "汕头", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳"]; var fujiang = ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"]; var hunan = ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西土家苗族自治区"]; var hubei = ["武汉", "襄阳", "黄石", "十堰", "宜昌", "鄂州", "荆门", "孝感", "荆州", "黄冈", "咸宁", "随州", "恩施土家族苗族自治州"]; var liaoning = ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"]; var jilin = ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治区"]; var heilongjiang = ["哈尔滨", "齐齐哈尔", "鸡西", "牡丹江", "佳木斯", "大庆", "伊春", "黑河", "大兴安岭"]; var hebei = ["石家庄", "保定", "唐山", "邯郸", "承德", "廊坊", "衡水", "秦皇岛", "张家口"]; var henan = ["郑州", "洛阳", "商丘", "安阳", "南阳", "开封", "平顶山", "焦作", "新乡", "鹤壁", "许昌", "漯河", "三门峡", "信阳", "周口", "驻马店", "济源"]; var shandong = ["济南", "青岛", "菏泽", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "滨州", "德州", "聊城", "临沂"]; var shangxi = ["西安", "宝鸡", "咸阳", "渭南", "铜川", "延安", "榆林", "汉中", "安康", "商洛"]; var gansu = ["兰州", "嘉峪关", "金昌", "金川", "白银", "天水", "武威", "张掖", "酒泉", "平凉", "庆阳", "定西", "陇南", "临夏", "合作"]; var qinghai = ["西宁", "海东地区", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"]; var xinjiang = ["乌鲁木齐", "奎屯", "石河子", "昌吉", "吐鲁番", "库尔勒", "阿克苏", "喀什", "伊宁", "克拉玛依", "塔城", "哈密", "和田", "阿勒泰", "阿图什", "博乐"]; var shanxi = ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"]; var sichuan = ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"]; var guizhou = ["贵阳", "六盘水", "遵义", "安顺", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "黔东南苗族侗族自治州", "铜仁", "毕节"]; var anhui = ["Hefei", "Wuhu", "Anqing", "Ma'anshan", "Fuyang", "Liu'an", "Chuzhou", "Suzhou", "Bengbu", "Chaohu", "Huainan", " Xuancheng", "Bozhou", "Huaibei", "Tongling", "Huangshan", "Chizhou"]; var jiangxi = ["Nanchang", "Jiujiang", "Jingdezhen", "Pingxiang", "Xinyu" ", "Yingtan", "Ganzhou", "Yichun", "Shangrao", "Ji'an", "Fuzhou"]; var yunnan = ["Kunming", "Qujing", "Yuxi", "Baoshan", "Zhaotong", "Lijiang", "Pu'er", "Lincang", "Chuxiong Yi Autonomous Prefecture", "Dali Bai Autonomous Prefecture", "Honghe Hani and Yi Autonomous Prefecture", "Wenshan Zhuang and Miao Autonomous Prefecture", "Xishuangbanna Dai Autonomous Prefecture", "Dehong Dai and Jingpo Autonomous Prefecture", "Nujiang Lisu Autonomous Prefecture", "Diqing Tibetan Autonomous Prefecture"]; var neimenggu = ["Hohhot", "Baotou", "Wuhai", "Chifeng", "Tongliao" ", "Ordos", "Hulunbuir", "Bayannur", "Ulanqab"]; var guangxi = ["Nanning", "Liuzhou", "Guilin", "Wuzhou", "Beihai" , "Fangchenggang", "Qinzhou", "Guigang", "Yulin", "Baise", "Hezhou", "Hechi", "Chongzuo"]; var xizang = ["Lhasa", "Chamdo area" , "Lingzhi area", "Shannan area", "Shigatse area", "Naqu area", "Ngari area"]; var ningxia = ["Yinchuan", "Shizuishan", "Wuzhong", "Guyuan", "中伟"]; var hainan = ["Haikou", "Sanya"]; var xianggang = ["Central and Western District", "Wanchai District", "Eastern District", "Southern District", "Kowloon City District ", "Yau Tsim Mong District", "Kwun Tong District", "Wong Tai Sin District", "Sham Shui Po District", "North District", "Tai Po District", "Shatin District", "Sai Kung District", "Yuan "Lang District", "Tuen Mun District", "Tsuen Wan District", "Kwai Tsing District", "Island District"]; var taiwan = ["Taipei", "Kaohsiung", "Keelung", "Taichung", "Tainan", "Hsinchu", "Chiayi"]; var aomeng = ["Macau Peninsula", "Taipa Island", "Coloane Island"]; //Page loading method $(function () { //Set province data setProvince(); //Set background color setBgColor(); }); //Set province data function setProvince() { //Assign a value to the province drop-down list var option, modelVal; var $sel = $("#selProvince"); //Get the corresponding province and city for (var i = 0, len = province.length; i modelVal = province[i]; option = " " modelVal " "; //Add to the select element $sel.append(option); } //Call the change event, initial city information provinceChange(); } //Get the corresponding city according to the selected province function setCity(provinec) { var $city = $("#selCity"); var proCity, option, modelVal; //Get the array name of the city corresponding to the province through the province name switch (provinec) { case "Beijing": proCity = beijing; break; case "Shanghai": proCity = shanghai; break; case "Tianjin": proCity = tianjing; break; case "Chongqing": proCity = chongqing; break; case "Zhejiang": proCity = zhejiang; break; case "Jiangsu": proCity = jiangsu; break; case "Guangdong": proCity = guangdong; break; case "Fujian": proCity = fujiang; break; case "Hunan": proCity = hunan; break; case "Hubei": proCity = hubei; break; case "Liaoning": proCity = liaoning; break; case "Jilin": proCity = jilin; break; case "Heilongjiang": proCity = heilongjiang; break; case "Hebei": proCity = hebei; break; case "Henan": proCity = henan; break; case "Shandong": proCity = shandong; break; case "Shaanxi": proCity = shangxi; break; case "Gansu": proCity = gansu; break; case "Xinjiang": proCity = xinjiang; break; case "Qinghai": proCity = qinghai; break; case "Shanxi": proCity = shanxi; break; case "Sichuan": proCity = sichuan; break; case "Guizhou": proCity = guizhou; break; case "Anhui": proCity = anhui; break; case "Jiangxi": proCity = jiangxi; break; case "Yunnan": proCity = yunnan; break; case "Inner Mongolia": proCity = neimenggu; break; case "Tibet": proCity = xizang; break; case "Guangxi": proCity = guangxi; break; case "": proCity = xizang; break; case "Ningxia": proCity = ningxia; break; case "Hainan": proCity = hainan; break; case "Hong Kong": proCity = xianggang; break; case "Macau": proCity = aomeng; break; case "Taiwan": proCity = taiwan; break; } //Clear the previously bound value first $city.empty(); //Set the city of the corresponding province for (var i = 0, len = proCity.length; i modelVal = proCity[i]; option = " "; //Add $city.append(option); } //Set the background setBgColor( ); } //Province selection event function provinceChange() { var $pro = $("#selProvince"); setCity($pro .val()); } //Set the drop-down list interval background color function setBgColor() { var $option = $("select option:odd"); $option.css ({ "background-color": "#DEDEDE" }); } China's three-level administrative unit linkage Province: City (district): The rendering is as follows:

jQuery Chinese province and city two-level linkage selection attached picture_jquery

Related articles