澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

【澳门太阳娱乐集团官网】依赖jquery完结省市联
分类:服务器

鉴于连串要求需求完成三个省市联合浮动,由于业务有意气风发对出奇的急需,使用现存的插件略有不便,就协调达成了多少个。首先需求保留地区数据的JS数据文件,作者这里命名叫areaData.js,内容如下:

本文实例呈报了依附jquery完成省市联动特效的代码,分享给我们供大家参照他事他说加以考察,具体如下:

本文实例为我们享用了jquery实现二级联合浮动的现实代码,供大家参谋,具体内容如下

/** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */  { window.areaData = [{"pro":"u5317u4eac","cities":{"-1":"u5317u4eac","0":"u4e1cu57ceu533a","1":"u897fu57ceu533a","4":"u671du9633u533a","5":"u4e30u53f0u533a","6":"u77f3u666fu5c71u533a","7":"u6d77u6dc0u533a","8":"u95e8u5934u6c9f","9":"u623fu5c71","10":"u901au5dde","11":"u987au4e49","12":"u660cu5e73","13":"u5927u5174","14":"u5e73u8c37","15":"u6000u67d4","16":"u5bc6u4e91","17":"u5ef6u5e86"}},{"pro":"u4e0au6d77","cities":{"-1":"u4e0au6d77","0":"u9ec4u6d66","2":"u5f90u6c47","3":"u957fu5b81","4":"u9759u5b89","5":"u666eu9640","6":"u95f8u5317","7":"u8679u53e3","8":"u6768u6d66","9":"u95f5u884c","10":"u5b9du5c71","11":"u5609u5b9a","12":"u6d66u4e1c","13":"u91d1u5c71","14":"u677eu6c5f","15":"u9752u6d66","17":"u5949u8d24","18":"u5d07u660e"}},{"pro":"u5929u6d25","cities":{"-1":"u5929u6d25","0":"u548cu5e73u533a","1":"u4e1cu4e3du533a","2":"u6cb3u4e1cu533a","3":"u897fu9752u533a","4":"u6cb3u897fu533a","5":"u6d25u5357u533a","6":"u5357u5f00u533a","7":"u5317u8fb0u533a","8":"u6cb3u5317u533a","9":"u6b66u6e05u533a","10":"u7ea2u6865u533a","14":"u5b81u6cb3","15":"u9759u6d77","16":"u5b9du577b","17":"u84dfu53bf","18":"u6ee8u6d77u65b0u533a"}},{"pro":"u91cdu5e86","cities":{"-1":"u91cdu5e86","0":"u4e07u5dde","1":"u6daau9675","2":"u6e1du4e2d","3":"u5927u6e21u53e3","4":"u6c5fu5317","5":"u6c99u576au575d","6":"u4e5du9f99u5761","7":"u5357u5cb8","8":"u5317u789a","9":"u4e07u76db","10":"u53ccu6322","11":"u6e1du5317","12":"u5df4u5357","13":"u9ed4u6c5f","14":"u957fu5bff","15":"u7da6u6c5f","16":"u6f7cu5357","17":"u94dcu6881 ","18":"u5927u8db3","19":"u8363u660c","20":"u74a7u5c71","21":"u6881u5e73","22":"u57ceu53e3","23":"u4e30u90fd","24":"u57abu6c5f","25":"u6b66u9686","26":"u5fe0u53bf","27":"u5f00u53bf","28":"u4e91u9633","29":"u5949u8282","30":"u5debu5c71","31":"u5debu6eaa","32":"u77f3u67f1","33":"u79c0u5c71","34":"u9149u9633","35":"u5f6du6c34","36":"u6c5fu6d25","37":"u5408u5ddd","38":"u6c38u5ddd","39":"u5357u5ddd"}},{"pro":"u6cb3u5317","cities":["u77f3u5bb6u5e84","u90afu90f8","u90a2u53f0","u4fddu5b9a","u5f20u5bb6u53e3","u627fu5fb7","u5ecau574a","u5510u5c71","u79e6u7687u5c9b","u6ca7u5dde","u8861u6c34"]},{"pro":"u5c71u897f","cities":["u592au539f","u5927u540c","u9633u6cc9","u957fu6cbb","u664bu57ce","u6714u5dde","u5415u6881","u5ffbu5dde","u664bu4e2d","u4e34u6c7e","u8fd0u57ce"]},{"pro":"u5185u8499u53e4","cities":["u547cu548cu6d69u7279","u5305u5934","u4e4cu6d77","u8d64u5cf0","u547cu4f26u8d1du5c14u76df","u963fu62c9u5584u76df","u901au8fbd","u5174u5b89u76df","u4e4cu5170u5bdfu5e03u76df","u9521u6797u90edu52d2u76df","u5df4u5f66u6dd6u5c14u76df","u9102u5c14u591au65af"]},{"pro":"u8fbdu5b81","cities":["u6c88u9633","u5927u8fde","u978du5c71","u629au987a","u672cu6eaa","u4e39u4e1c","u9526u5dde","u8425u53e3","u961cu65b0","u8fbdu9633","u76d8u9526","u94c1u5cad","u671du9633","u846bu82a6u5c9b"]},{"pro":"u5409u6797","cities":["u957fu6625","u5409u6797","u56dbu5e73","u8fbdu6e90","u901au5316","u767du5c71","u677eu539f","u767du57ce","u5ef6u8fb9"]},{"pro":"u9ed1u9f99u6c5f","cities":["u54c8u5c14u6ee8","u9f50u9f50u54c8u5c14","u7261u4e39u6c5f","u4f73u6728u65af","u5927u5e86","u7ee5u5316","u9e64u5c97","u9e21u897f","u9ed1u6cb3","u53ccu9e2du5c71","u4f0au6625","u4e03u53f0u6cb3","u5927u5174u5b89u5cad"]},{"pro":"u6c5fu82cf","cities":["u5357u4eac","u9547u6c5f","u82cfu5dde","u5357u901a","u626cu5dde","u76d0u57ce","u5f90u5dde","u8fdeu4e91u6e2f","u5e38u5dde","u65e0u9521","u5bbfu8fc1","u6cf0u5dde","u6deeu5b89"]},{"pro":"u6d59u6c5f","cities":["u676du5dde","u5b81u6ce2","u6e29u5dde","u5609u5174","u6e56u5dde","u7ecdu5174","u91d1u534e","u8862u5dde","u821fu5c71","u53f0u5dde","u4e3du6c34"]},{"pro":"u5b89u5fbd","cities":{"0":"u5408u80a5","1":"u829cu6e56","2":"u868cu57e0","3":"u9a6cu978du5c71","4":"u6deeu5317","5":"u94dcu9675","6":"u5b89u5e86","7":"u9ec4u5c71","8":"u6ec1u5dde","9":"u5bbfu5dde","10":"u6c60u5dde","11":"u6deeu5357","13":"u961cu9633","14":"u516du5b89","15":"u5ba3u57ce","16":"u4eb3u5dde"}},{"pro":"u798fu5efa","cities":["u798fu5dde","u53a6u95e8","u8386u7530","u4e09u660e","u6cc9u5dde","u6f33u5dde","u5357u5e73","u9f99u5ca9","u5b81u5fb7"]},{"pro":"u6c5fu897f","cities":["u5357u660cu5e02","u666fu5fb7u9547","u4e5du6c5f","u9e70u6f6d","u840du4e61","u65b0u4f59","u8d63u5dde","u5409u5b89","u5b9cu6625","u629au5dde","u4e0au9976"]},{"pro":"u5c71u4e1c","cities":["u6d4eu5357","u9752u5c9b","u6dc4u535a","u67a3u5e84","u4e1cu8425","u70dfu53f0","u6f4du574a","u6d4eu5b81","u6cf0u5b89","u5a01u6d77","u65e5u7167","u83b1u829c","u4e34u6c82","u5fb7u5dde","u804au57ce","u6ee8u5dde","u83cfu6cfd"]},{"pro":"u6cb3u5357","cities":["u90d1u5dde","u5f00u5c01","u6d1bu9633","u5e73u9876u5c71","u5b89u9633","u9e64u58c1","u65b0u4e61","u7126u4f5c","u6feeu9633","u8bb8u660c","u6f2fu6cb3","u4e09u95e8u5ce1","u5357u9633","u5546u4e18","u4fe1u9633","u5468u53e3","u9a7bu9a6cu5e97","u6d4eu6e90"]},{"pro":"u6e56u5317","cities":["u6b66u6c49","u5b9cu660c","u8346u5dde","u8944u6a0a","u9ec4u77f3","u8346u95e8","u9ec4u5188","u5341u5830","u6069u65bd","u6f5cu6c5f","u5929u95e8","u4ed9u6843","u968fu5dde","u54b8u5b81","u5b5du611f","u9102u5dde","u795eu519cu67b6"]},{"pro":"u6e56u5357","cities":["u957fu6c99","u5e38u5fb7","u682au6d32","u6e58u6f6d","u8861u9633","u5cb3u9633","u90b5u9633","u76cau9633","u5a04u5e95","u6000u5316","u90f4u5dde","u6c38u5dde","u6e58u897f","u5f20u5bb6u754c"]},{"pro":"u5e7fu4e1c","cities":["u5e7fu5dde","u6df1u5733","u73e0u6d77","u6c55u5934","u4e1cu839e","u4e2du5c71","u4f5bu5c71","u97f6u5173","u6c5fu95e8","u6e5bu6c5f","u8302u540d","u8087u5e86","u60e0u5dde","u6885u5dde","u6c55u5c3e","u6cb3u6e90","u9633u6c5f","u6e05u8fdc","u6f6eu5dde","u63edu9633","u4e91u6d6e"]},{"pro":"u5e7fu897f","cities":{"0":"u5357u5b81","1":"u67f3u5dde","2":"u6842u6797","3":"u68a7u5dde","4":"u5317u6d77","5":"u9632u57ceu6e2f","6":"u94a6u5dde","7":"u8d35u6e2f","8":"u7389u6797","11":"u8d3au5dde","12":"u767eu8272","13":"u6cb3u6c60","14":"u6765u5bbe","15":"u5d07u5de6"}},{"pro":"u6d77u5357","cities":["u6d77u53e3","u4e09u4e9a","u4e09u6c99","u4e94u6307u5c71","u743cu6d77","u510bu5dde","u6587u660c","u4e07u5b81","u4e1cu65b9","u5b9au5b89","u5c6fu660c","u6f84u8fc8","u4e34u9ad8","u767du6c99","u660cu6c5f","u4e50u4e1c","u9675u6c34","u4fddu4ead","u743cu4e2d"]},{"pro":"u56dbu5ddd","cities":["u6210u90fd","u7ef5u9633","u5fb7u9633","u81eau8d21","u6500u679du82b1","u5e7fu5143","u5185u6c5f","u4e50u5c71","u5357u5145","u5b9cu5bbe","u5e7fu5b89","u8fbeu5dde","u96c5u5b89","u7709u5c71","u7518u5b5c","u51c9u5c71","u6cf8u5dde","u963fu575du5dde","u9042u5b81u5e02","u5df4u4e2du5e02","u8d44u9633u5e02"]},{"pro":"u8d35u5dde","cities":["u8d35u9633","u516du76d8u6c34","u9075u4e49","u5b89u987a","u94dcu4ec1","u9ed4u897fu5357","u6bd5u8282","u9ed4u4e1cu5357","u9ed4u5357"]},{"pro":"u4e91u5357","cities":["u6606u660e","u5927u7406","u66f2u9756","u7389u6eaa","u662du901a","u695au96c4","u7ea2u6cb3","u6587u5c71","u666eu6d31","u897fu53ccu7248u7eb3","u4fddu5c71","u5fb7u5b8f","u4e3du6c5f","u6012u6c5f","u8feau5e86","u4e34u6ca7"]},{"pro":"u897fu85cf","cities":["u62c9u8428","u65e5u5580u5219","u5c71u5357","u6797u829d","u660cu90fd","u963fu91cc","u90a3u66f2"]},{"pro":"u9655u897f","cities":["u897fu5b89","u5b9du9e21","u54b8u9633","u94dcu5ddd","u6e2du5357","u5ef6u5b89","u6986u6797","u6c49u4e2d","u5b89u5eb7","u5546u6d1b"]},{"pro":"u7518u8083","cities":["u5170u5dde","u5609u5ceau5173","u91d1u660c","u767du94f6","u5929u6c34","u9152u6cc9","u5f20u6396","u6b66u5a01","u5b9au897f","u9647u5357","u5e73u51c9","u5e86u9633","u4e34u590f","u7518u5357"]},{"pro":"u5b81u590f","cities":["u94f6u5ddd","u77f3u5634u5c71","u5434u5fe0","u56fau539f","u4e2du536b"]},{"pro":"u9752u6d77","cities":["u897fu5b81","u6d77u4e1c","u6d77u5357","u6d77u5317","u9ec4u5357","u7389u6811","u679cu6d1b","u6d77u897f"]},{"pro":"u65b0u7586","cities":["u4e4cu9c81u6728u9f50","u77f3u6cb3u5b50","u514bu62c9u739bu4f9d","u4f0au7281","u5df4u97f3u90edu695e","u660cu5409","u514bu5b5cu52d2u82cfu67efu5c14u514bu5b5c","u535au5c14u5854u62c9","u5410u9c81u756a","u54c8u5bc6","u5580u4ec0","u548cu7530","u963fu514bu82cf","u5854u57ce","u963fu52d2u6cf0","u963fu62c9u5c14","u56feu6728u8212u514b","u4e94u5bb6u6e20","u5317u5c6f","u94c1u95e8u5173"]},{"pro":"u9999u6e2f","cities":["u9999u6e2fu7279u522bu884cu653fu533a"]},{"pro":"u6fb3u95e8","cities":["u6fb3u95e8u7279u522bu884cu653fu533a"]},{"pro":"u53f0u6e7e","cities":["u53f0u5317","u9ad8u96c4","u53f0u4e2d","u53f0u5357","u5c4fu4e1c","u5357u6295","u4e91u6797","u65b0u7af9","u5f70u5316","u82d7u6817","u5609u4e49","u82b1u83b2","u6843u56ed","u5b9cu5170","u57fau9686","u53f0u4e1c","u91d1u95e8","u9a6cu7956","u6f8eu6e56"]}];});
 Demo      $ { $.GangedArea({ level: 2, // 显示级别, 最大是3, 最小是1 url: "area.json",// area对应的路径 provinceValue: "",// 默认指定省份id, 一般编辑的时候使用 cityValue: "", //指定默认城市id, 一般编辑的时候使用 districtValue: '', // 默认区id, 一般编辑的时候使用 className: '', // 附加样式 provinceName: 'province', // 省份name值 cityName: 'city',//市name值 districtName: 'district',// 区name值 tip: '===请选择==='// 默认提示 }); }) 
 二级联动   $.ready{ $.change{ $.each{ if.attr { $; $; } }); }); $; });  ----请选择省份---- 北京 上海 江苏   ----请选择城市----   东城 西城 崇文 宣武 朝阳   黄浦 卢湾 徐汇 长宁 静安   南京 镇江 苏州 南通 扬州 

插件文件名字为:provinceCity.js,源码:

可望本文所述对我们JavaScript程序设计有着支持。

上述便是本文的全体内容,希望对我们的就学抱有利于,也期望大家多都赐教脚本之家。

{ /** * 省市联动 * @param {Array} areaData 地区数组 格式:[{pro: '北京', cities: {-1: 北京, 0: 东城区, ...}},{...}] * @param {Object} options 一些配置选项 * @returns {Object} jQuery对象 */ $.fn.citySelect = function{ if return; var opts = $.extend({ provinceID: -1, cityID: -1, isShowDefaultVal: true, isDealComArea: false }, options); var $province = $.eq; var $city = $.eq; //-1是直辖市信息 var provicneID = opts.provinceID; var cityID = opts.cityID; var isShowDefaultVal = opts.isShowDefaultVal; var isDealComArea = opts.isDealComArea; var defaultData = ['请选择', '-2']; var tmpArr = []; //增加下拉项到临时数组 var addOpt = function{ tmpArr.push(""+text+""); }; //省份变更联动城市下拉 var changeHandler = function(){ var provinceID = $province.val(); tmpArr = []; //非省 provinceID == -2 && isShowDefaultVal && addOpt(defaultData[1],defaultData[0]); if { $.each(areaData[provinceID]['cities'], function { //是否只显示直辖市 if(isDealComArea && provinceID < 4) { addOpt(cityID, areaData[provinceID]['pro'], cityID); return false; }else { cid != -1 && addOpt; } }); } $city.html; }; //初始化省份 var initProvince = function() { tmpArr = []; //默认省级下拉 isShowDefaultVal && addOpt(defaultData[1],defaultData[0]); $.each(areaData, function{ addOpt(pid,details.pro,provicneID); }); $province.html; }; //初始化事件 var init = function; //省级联动 控制 $province.on('change', changeHandler); changeHandler; return this; };};

 省市联动   

使用办法:第风度翩翩种:初阶化省市政委员会选举择

$.citySelect;

$.citySelect(areaData, { isShowDefaultVal: false });

$.citySelect(areaData, { provinceID: 10, cityID: 3, isShowDefaultVal: false });

第八种:归属职业的异样供给,当为直辖市的时候,只浮现直辖市,不显示分区

$.citySelect(areaData, { provinceID: 0, cityID: -1, isDealComArea: true, isShowDefaultVal: false });

如上就是依附jquery达成省市联合浮动作效果应的代码,在那地做一下记下,招待大家提提出,协同进步。

本文由澳门太阳娱乐集团官网发布于服务器,转载请注明出处:【澳门太阳娱乐集团官网】依赖jquery完结省市联

上一篇:澳门太阳娱乐集团官网使用JavaScript动态设置样式 下一篇:澳门太阳娱乐集团官网jquery网页加载进度条的实
猜你喜欢
热门排行
精彩图文