jQuery Sélection de liaison à deux niveaux de province et de ville chinoises ci-jointe picture_jquery

Copier le code Le code est le suivant : 省市两级联动选择 sélectionnez { largeur : 135 px ; } fieldset dl dd { float : gauche ; marge gauche : 20px ; } fieldset pré { largeur : 100 % ; hauteur : 400px ; overflow-y : scroll ; overflow-x : caché ; } //定义数组，存储省份信息 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", "Préfecture autonome Yi de Chuxiong", "Préfecture autonome de Dali Bai", "Préfecture autonome Hani Yi de Honghe", "Wenshan Zhuang et Miao Préfecture autonome", "Préfecture autonome Dai du Xishuangbanna", "Préfecture autonome Dai et Jingpo de Dehong", "Préfecture autonome Nujiang Lisu", "Préfecture autonome tibétaine de Diqing"]; 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 = ["Lhassa" , "Zone Chamdo", "Zone Lingzhi", "Zone Shannan", "Zone Shigatse", "Zone Naqu", "Zone Ngari"]; var ningxia = ["Yinchuan", "Shizuishan", "Wuzhong" , "Guyuan", "中伟"]; var hainan = ["Haikou", "Sanya"]; var xianggang = ["District central et occidental", "District de Wanchai", "District de l'Est" , « District Sud », « District de Kowloon City », « District de Yau Tsim Mong », « District de Kwun Tong », « District de Wong Tai Sin », « District de Sham Shui Po », « District Nord », « District de Tai Po », "District de Shatin", "District de Sai Kung", "District de Yuan "District de Lang", "District de Tuen Mun", "District de Tsuen Wan", "District de Kwai Tsing", "District de l'île"]; var taiwan = [" Taipei", "Kaohsiung", "Keelung", "Taichung", "Tainan", "Hsinchu", "Chiayi"]; var aomeng = ["Macao Peninsula", "Taipa Island", "Coloane Island"] ; //Méthode de chargement de la page $(function () { //Définir les données de la province setProvince(); //Définir la couleur d'arrière-plan setBgColor(); }); //Définir les données de la province function setProvince() { //Attribuer une valeur à la liste déroulante des provinces var option, modelVal; var $sel = $("#selProvince"); //Obtenir la province et la ville correspondantes pour (var i = 0, len = province.length; i modelVal = province[i]; option = " " modelVal " "; 🎜>//Ajouter à l'élément sélectionné $sel.append(option); } //Appeler l'événement de changement, informations initiales sur la ville provinceChange(); } //Obtenir la ville correspondante selon la province sélectionnée function setCity(provinec) { var $city = $("#selCity"); , option, modelVal; //Obtenir le nom du tableau de la ville correspondant à la province via le nom de la province switch (provinec) { case "Beijing": proCity = beijing ; pause; cas "Shanghai": proCity = shanghai; cas "Tianjin": proCity = tianjing; "Chongqing": proCity = chongqing; break; cas "Zhejiang": proCity = break; ; break; cas "Guangdong": proCity = guangdong; cas "Fujian": proCity = fujiang; "Hunan": proCity = hunan; break; cas "Hubei": proCity = hubei; cas "Liaoning": proCity = liaoning; ; pause; cas "Jilin": proCity = jilin; cas "Heilongjiang": proCity = pause; "Hebei": proCity = hebei; break; cas "Henan": proCity = henan; cas "Shandong": proCity = shandong; ; break; cas "Shaanxi": proCity = shangxi; cas "Gansu": proCity = gansu; "Xinjiang": proCity = xinjiang; break; cas "Qinghai": proCity = qinghai; cas "Shanxi": proCity = shanxi; ; pause; cas "Sichuan": proCity = sichuan; cas "Guizhou": proCity = pause; "Anhui": proCity = anhui; break; cas "Jiangxi": proCity = break; ; break; cas "Mongolie intérieure": proCity = neimenggu; cas "Tibet": proCity = break; cas "Guangxi": proCity = guangxi; break; cas "": proCity = break; cas "Ningxia": proCity = ningxia ; break; cas "Hainan": proCity = hainan; break; cas "Hong Kong": proCity = break; cas "Macao": proCity = aomeng; break; cas "Taiwan": proCity = taiwan; } //Effacer la valeur précédemment liée en premier $city.empty(); //Définissez la ville de la province correspondante pour (var i = 0, len = proCity.length; i modelVal = proCity[i]; option = " " // Ajouter $city.append(option); } //Définir l'arrière-plan setBgColor( ); événement de sélection function provinceChange() { var $pro = $("#selProvince"); setCity($pro .val()); //Définir la couleur d'arrière-plan de l'intervalle de la liste déroulante function setBgColor() { var $option = $("select option:odd"); .css ({ "background-color": "#DEDEDE" }); } ; Lien vers les unités administratives à trois niveaux de la Chine () ;"> Ville (district) : Le rendu est la suivante :

jQuery Sélection de liaison à deux niveaux de province et de ville chinoises ci-jointe picture_jquery

Articles Liés