jQuery中Chosen三级联动功能实例代码
Chosen是一个JavaScript插件,它能让丑陋的、很长的select选择框变的更好看、更方便,不仅如此,它更扩大了,增长了主动筛选的功能。
本文介绍Chosen联动,具体代码如下:
varaddressResolve=function(options){ //检测用户传进来的参数是否合法 if(!isValid(options)) returnthis; //默认参数 vardefaluts={ proId:'divProv', cityId:'divCity', areaId:'divArea' }; varopts=$j.extend({},defaluts,options);//使用jQuery.extend覆盖插件默认参数 varaddressInfo=this; this.provInfo=$j("#"+opts.proId);//省份select对象 this.cityInfo=$j("#"+opts.cityId);//城市select对象 this.areaInfo=$j("#"+opts.areaId);//区县select对象 /*省份初始化方法*/ this.provInfoInit=function(){ varproOpts=""; $j.each(provinceJson,function(index,item){ proOpts+=""+item.name+""; }); addressInfo.provInfo.append(proOpts); addressInfo.provInfo.chosen();//初始化chosen addressInfo.cityInfo.chosen();//初始化chosen addressInfo.areaInfo.chosen();//初始化chosen }; /*城市选择绑定方法*/ this.selectCity=function(){ addressInfo.cityInfo.empty(); addressInfo.cityInfo.append(" 选择城市"); addressInfo.areaInfo.empty(); addressInfo.areaInfo.append(" 选择区县"); if(addressInfo.provInfo.val()=="选择省份"){//选择无效时直接返回 addressInfo.cityInfo.trigger("liszt:updated"); addressInfo.areaInfo.trigger("liszt:updated"); return; } varprovId=addressInfo.provInfo.val();//获取选择的省份值 varcityOpts=""; $j.each(cityJson,function(index,item){ if(item.ProID==provId){ cityOpts+=" "+item.name+""; } }); addressInfo.cityInfo.append(cityOpts); addressInfo.cityInfo.trigger("liszt:updated"); addressInfo.areaInfo.trigger("liszt:updated"); }; /*区县选择绑定方法*/ this.selectArea=function(){ if(addressInfo.cityInfo.val()=="选择城市")return; addressInfo.areaInfo.empty(); addressInfo.areaInfo.append(" 选择区县"); varcityId=addressInfo.cityInfo.val();//获取选择的城市值 varareaOpts=""; $j.each(areaJson,function(index,item){ if(item.CityID==cityId){ areaOpts+=" "+item.DisName+""; } }); addressInfo.areaInfo.append(areaOpts); addressInfo.areaInfo.trigger("liszt:updated"); }; /*对象初始化方法*/ this.init=function(){ addressInfo.provInfo.append(" 选择省份"); addressInfo.cityInfo.append(" 选择城市"); addressInfo.areaInfo.append(" 选择区县"); addressInfo.provInfoInit(); addressInfo.provInfo.bind("change",addressInfo.selectCity); addressInfo.cityInfo.bind("change",addressInfo.selectArea); } //私有方法,检测参数是否合法 functionisValid(options){ return!options||(options&&typeofoptions==="object")?true:false; } }
以上所述是小编给大家介绍的jQuery中Chosen三级联动实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!