layui自定义插件citySelect实现省市区三级联动选择
本文实例为大家分享了layui实现省市区三级联动选择的具体代码，供大家参考，具体内容如下
省市区三级菜单联动插件
/**
*@name:citySelect省市区三级选择模块
*@Author:aggerChen
*@version:1.0
*/
layui.define(['layer','form','element','laytpl'],function(exports){
var$=layui.$;
varform=layui.form;
varlaytpl=layui.laytpl;
varelement=layui.emelemt;
//外部接口
varcitySelect={
config:{}//全局配置项
,cache:{}//数据缓存
,index:layui.laypage?(layui.laypage.index+10000):0
};
//操作当前实例
varthisSelect=function(){
varthat=this,
options=that.config,
id=options.id;
id&&(thisSelect.config[id]=options);
return{
reload:function(options){
that.reload.call(that,options);
},
config:options
}
};
//字符常量
varMOD_NAME='citySelect';
//主模板
varTPL_MAIN=['<divclass="layui-form-item">',
'<labelclass="layui-form-label">{{d.data.lableName}}</label>',
'<divclass="layui-input-inline"style="width:160px">',
'<selectname="{{d.data.filed.provinceName}}"class="{{d.data.id}}_selectCity"id="citySelect_{{d.data.filed.provinceName}}{{d.index}}"lay-filter="province{{d.index}}"{{#if(d.data.search){}}lay-search{{#}}}{{#if(d.data.required){}}lay-verify="required"{{#}}}{{#if(d.data.disabled){}}disabled{{#}}}>',
'<optionvalue="000000">--全部--</option>',
'</select>',
'</div>',
'<divclass="layui-input-inline"style="width:161px">',
'<selectname="{{d.data.filed.cityName}}"class="{{d.data.id}}_selectCity"id="citySelect_{{d.data.filed.cityName}}{{d.index}}"lay-filter="city{{d.index}}"{{#if(d.data.search){}}lay-search{{#}}}{{#if(d.data.required){}}lay-verify="required"{{#}}}{{#if(d.data.disabled){}}disabled{{#}}}>',
'<optionvalue="">--全部--</option>',
'</select>',
'</div>',
'{{#if(d.data.filed.area){}}',
'<divclass="layui-input-inline"style="width:161px">',
'<selectname="{{d.data.filed.areaName}}"class="{{d.data.id}}_selectCity"id="citySelect_{{d.data.filed.areaName}}{{d.index}}"lay-filter="area{{d.index}}"{{#if(d.data.search){}}lay-search{{#}}}{{#if(d.data.required){}}lay-verify="required"{{#}}}{{#if(d.data.disabled){}}disabled{{#}}}>',
'<optionvalue="">--全部--</option>',
'</select>',
'</div>',
'{{#}}}',
'{{#if(d.data.msg){}}',
'<divclass="layui-form-midlayui-word-aux">{{d.data.msg}}</div>',
'{{#}}}',
'</div>'
].join("");
//选项模板
varTPL_OPTION=[
'<optionvalue="">--全部--</option>',
'{{#layui.each(d.data,function(index,item){}}',
'<optionclass="ajaxOption"value="{{item[d.options.filed.regionId]}}"{{#if(d.options.selectedArr.length>0&&($.inArray(item[d.options.filed.regionId],d.options.selectedArr)!=-1)){}}selected{{#}}}>{{item[d.options.filed.regionName]}}</option>',
'{{#})}}'
].join("");
//构造器
varClass=function(options){
varthat=this;
that.index=++citySelect.index;
that.config=$.extend(true,{},that.config,citySelect.config,options);
that.render();
};
//核心入口
citySelect.render=function(options){
varinst=newClass(options);
returnthisSelect.call(inst);
};
//获取选中值
citySelect.values=function(id){
returncitySelect.cache[id]["values"];//返回缓存中的选中值
};
//设置禁用/启用
citySelect.disabled=function(id,flag){
$("."+id+"_selectCity").attr("disabled",flag);
};
//重载
thisSelect.config={};
citySelect.reload=function(id,options){
varconfig=thisSelect.config[id];
if(!config)returnhint.error('TheIDoptionwasnotfoundinthecitySelectinstance');
returncitySelect.render($.extend(true,{},config,options));
};
//默认配置
Class.prototype.config={
lableName:"行政区域",
required:false,//是否必选
search:true,//是否搜索
msg:null,//默认附加信息
selectedArr:[],//默认选中数组
disabled:false,//禁用默认不禁用
filed:{
area:true,//默认启用区
regionId:'regionId',//默认字段id名
regionName:'regionName',//默认字段name名
provinceName:"province",//默认省份名称
cityName:"city",//默认城市名称
areaName:"area",//默认区县名称
},
};
//加载容器
Class.prototype.render=function(){
varthat=this;
varoptions=that.config;
options.elem=$(options.elem);
varothis=options.elem;
if(!options.elem[0])returnthat;//如果元素不存在
//请求参数的自定义格式
options.request=$.extend({
//pageName:'page',
//limitName:'limit'
},options.request);
//响应数据的自定义格式
options.response=$.extend({
statusName:'code',
statusCode:0,
msgName:'msg',
dataName:'data',
},options.response);
//主容器
varreElem=that.elem=$(laytpl(TPL_MAIN).render({
//VIEW_CLASS:ELEM_VIEW,
data:options,
index:that.index//索引
}));
othis.html(reElem);//生成主元素
that.pullData();//渲染初始
that.formFilter();//监听选择
};
//监听表单
Class.prototype.formFilter=function(){
varthat=this;
varoptions=that.config;
that.key=options.id||options.index;
//监听省
form.on('select(province'+that.index+')',function(data){
varcityDom=$("#citySelect_"+options.filed.cityName+that.index);//市
varareaDom=$("#citySelect_"+options.filed.areaName+that.index);//区
that.chearDom(cityDom);//清理市
that.chearDom(areaDom);//清理区
citySelect.cache[that.key]["values"][0]=data.value;//存入缓存
citySelect.cache[that.key]["values"][1]="";//清理市级缓存
citySelect.cache[that.key]["values"][2]="";//清理区级缓存
if(data.value!=""){
if(options.data){
that.localData(cityDom,data.value);//本地渲染市级
}else{
that.ajaxData(cityDom,data.value);//ajax渲染市
}
}
});
//监听市
form.on('select(city'+that.index+')',function(data){
varareaDom=$("#citySelect_"+options.filed.areaName+that.index);//区
that.chearDom(areaDom);//清理区
citySelect.cache[that.key]["values"][1]=data.value;
citySelect.cache[that.key]["values"][2]="";
if(data.value!=""){
if(options.data){
that.localData(areaDom,data.value);//本地渲染市级
}else{
that.ajaxData(areaDom,data.value);//加载区
}
}
});
//监听区
form.on('select(area'+that.index+')',function(data){
citySelect.cache[that.key]["values"][2]=data.value;
console.log("选择区");//得到select原始DOM对象
});
};
//渲染数据
Class.prototype.pullData=function(){
varthat=this;
varoptions=that.config;
vardom=$("#citySelect_"+options.filed.provinceName+that.index);//默认先渲染省
that.key=options.id||options.index;
citySelect.cache[that.key]={values:["","",""]};//记录values缓存标记
if(options.data){//data存在
that.localData(dom,"000000");
}elseif(options.url){//url存在
that.ajaxData(dom);
}
};
//data渲染数据
Class.prototype.localData=function(dom,regionId){
varthat=this;
varoptions=that.config;
varregs=/^\d{2}0000$/;//验证省id
varregc=/^\d{4}00$/;//验证市ID
if(regionId=="000000"){
//渲染省级
that.renderData(options.data,dom);
}elseif(regs.test(regionId)){
//渲染市级
$.each(options.data,function(index,item){
if(regionId==item[options.filed.regionId]){
that.renderData(item.children,dom);
}
});
}elseif(regc.test(regionId)){
//渲染区级
varsId=regionId.substr(0,2)+"0000";//获取省级Id
$.each(options.data,function(index,item){
if(sId==item[options.filed.regionId]){
$.each(item.children,function(i,it){
if(regionId==it[options.filed.regionId]){
that.renderData(it.children,dom);
}
});
}
});
}
}
//ajax获取数据
Class.prototype.ajaxData=function(dom,regionId){
varthat=this;
varoptions=that.config;
varresponse=options.response;
varparams={};
params[options.filed.regionId]=regionId==undefined?"000000":regionId;
//先查看缓存有没有
if(citySelect.cache[that.key][regionId]!=undefined){
that.renderData(citySelect.cache[that.key][regionId],dom);
}else{
$.ajax({
type:options.method||'get',
url:options.url,
data:$.extend(params,options.where),
dataType:'json',
success:function(res){
if(res[response.statusName]!=response.statusCode){
that.renderForm();
typeofoptions.error==='function'&&options.error(res);
return;
}
vardata=res[options.response.dataName]||[];
that.renderData(data,dom);
if(data.length>0){
citySelect.cache[that.key][regionId]=data;//将已经获取的数据保存缓存
}
options.time=(newDate().getTime()-that.startTime)+'ms';//耗时（接口请求+视图渲染）
typeofoptions.done==='function'&&options.done(res);
}
,error:function(e,m){
that.renderData('<optionvalue="">数据接口请求异常</option>',dom);
typeofoptions.error==='function'&&options.error(res,e,m);
}
});
}
};
//数据渲染
Class.prototype.renderData=function(data,dom){
varthat=this,
options=that.config;
varselectedArr=options.selectedArr;//获取默认选中数组
if(typeofdata==='string'){
$(dom).html(data);
}else{
//渲染选择项
$(dom).html($(laytpl(TPL_OPTION).render({
data:data,
options:options,
index:that.index//索引
})));
that.renderForm('select');
}
//设置默认选中
varv=$(dom).val();
if(v!=""&&selectedArr.length>0){
for(vari=0;i<selectedArr.length;i++){
if(v==selectedArr[i]&&i<3){
citySelect.cache[that.key]["values"][i]=v;//保存到选中缓存
that.config.selectedArr[i]="";//清除默认选择数组
if(i==0){
vardom=$("#citySelect_"+options.filed.cityName+that.index);
if(options.data){
that.localData(dom,v);//本地渲染市级
}else{
that.ajaxData(dom,v);//ajax渲染市级
}
}elseif(i==1&&options.filed.area){
vardom=$("#citySelect_"+options.filed.areaName+that.index);
if(options.data){
that.localData(dom,v);//本地渲染区级
}else{
that.ajaxData(dom,v);//ajax渲染区级
}
}
}
}
}
};
//渲染表单
Class.prototype.renderForm=function(type){
form.render(type);
};
//清空select
Class.prototype.chearDom=function(dom){
varthat=this;
$(dom).html('');
$(dom).append('<optionvalue="">--全部--</option>');
that.renderForm('select');
};
//暴露模块
exports(MOD_NAME,citySelect);
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。