实例介绍
【实例简介】
模块init函数最多接受6个参数版本1.0
第一个 定义三级联动dom的外层div(必填)
第二个 定义了三级联联动请求的后台接口 也可以写本地接口 返回的json形式参考上面的json的代码块标注
第三个 定义三级联动的标题 如果想每个select框有自己的标题 请修改js代码里面的dom结构(必填)
第四个 定义了第一个select默认的value 填对应的id(可不填)
第五个 定义了第二个select默认的value 填对应的id(可不填)
第六个 定义了第三个select默认的value 填对应的id(可不填)
1.0百度网盘下载地址(接受6个参数不可复用无返回值)
链接: https://pan.baidu.com/s/1f-juQ_K51ZnZrLWoWKnvVQ 提取码: 5yff
模块init函数最多接受9个参数版本2.0
第一个 定义三级联动dom的外层div(必填)
第二个 定义了三级联联动请求的后台接口 也可以写本地接口 返回的json形式参考上面的json的代码块标注
第三个 定义三级联动的标题 如果想每个select框有自己的标题 请修改js代码里面的dom结构(必填)
第四个 定义第一级select的id以便创建多个联动(必填)
第五个 定义第二级select的id以便创建多个联动(必填)
第六个 定义第三级select的id以便创建多个联动(必填)
第七个 定义了第一个select默认的value 填对应的id(可不填)
第八个 定义了第二个select默认的value 填对应的id(可不填)
第九个 定义了第三个select默认的value 填对应的id(可不填)
————————————————
版权声明：本文为CSDN博主「总感觉挺好的」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
【实例截图】
不带默认参数的效果
带默认参数的效果
【核心代码】
html部分
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/bootstrap.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div id="main"></div>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery.js"></script>
<script>
//设置模块
layui.config({
base:'js/'
}).use(['test','jquery','form','layedit'], function(){
var test = layui.test,
$ = layui.jquery,
form = layui.form;
layedit = layui.layedit;
//传参
// 1.三级联动要放到的div
// 2.接口地址 可写本地接口和网络接口
// 3.三级联动的表头字
// 4.三级联动第一级默认值id
// 5.三级联动第二级默认值id
// 6.三级联动第三级默认值id
test.init('main','http://localhost:3000/data','三级联动',3,32,321);
form.render();
});
</script>
</body>
</html>
layui.define(["jquery","layer",'form','layedit'], function(exports) {
var $ = layui.jquery,
layer = layui.layer,
form = layui.form,
layedit = layui.layedit;
var ZHC_Category = {
//
init:function(ID,URL,NAME,Default1,Default2,Default3){
//定义dom结构
$("#" ID "").append(
`
<form class="layui-form" action="">
<div class="layui-inline">
<div class="layui-form-item">
<label class="layui-form-label" style="width:120px">${NAME}</label>
<div class="layui-input-inline">
<select name="province" id="province" lay-filter="yiji">
<option value="请选择">请选择</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" id="city" lay-filter="erji">
<option value="请选择">请选择</option>
</select>
</div>
<div class="layui-input-inline">
<select name="town" id="town" lay-filter="sanji">
<option value="请选择">请选择</option>
</select>
</div>
</div>
</div>
</form>
`
);
//渲染数据
var province=$("#province"),
city=$("#city"),
town=$("#town");
var provinceList;
var two;
//getJSON获取本地json
$.getJSON("" URL "",function(data){
console.log(data)
provinceList = data;
//一级默认选择
for(var i=0;i<provinceList.length;i ){
if(Default1!=provinceList[i].id){
addEle(province,provinceList[i].name);
}else if(Default1==provinceList[i].id){
var optionStr1="";
optionStr1="<option value=" provinceList[i].name " selected=''>" provinceList[i].name "</option>";
province.append(optionStr1);
form.render();
//二级默认选择
for(var j=0;j<provinceList[i].cityList.length;j ){
if(Default2!=provinceList[i].cityList[j].id){
addEle(city,provinceList[i].cityList[j].name);
}else if(Default2==provinceList[i].cityList[j].id){
var optionStr2="";
two = j;
optionStr2="<option value=" provinceList[i].cityList[j].name " selected=''>" provinceList[i].cityList[j].name "</option>";
city.append(optionStr2);
form.render();
//三级默认选择
if(Default3!=undefined||Default3!=null){
for(var k=0;k<provinceList[i].cityList[j].areaList.length;k ){
if(Default3!=provinceList[i].cityList[j].areaList[k].id){
var optionStr3="";
optionStr3="<option value=" provinceList[i].cityList[j].areaList[k].name ">" provinceList[i].cityList[j].areaList[k].name "</option>";
town.append(optionStr3);
form.render();
}else if(Default3==provinceList[i].cityList[j].areaList[k].id){
var optionStr3="";
optionStr3="<option value=" provinceList[i].cityList[j].areaList[k].name " selected=''>" provinceList[i].cityList[j].areaList[k].name "</option>";
town.append(optionStr3);
form.render();
}
}
}
}
}
}
}
function addEle(ele,value){
console.log(value);
var optionStr="";
optionStr="<option value=" value ">" value "</option>";
ele.append(optionStr);
}
function removeEle(ele){
ele.find("option").remove();
var optionStar="<option value=" "请选择" ">" "请选择" "</option>";
ele.append(optionStar);
}
var provinceText,cityText,cityItem;
//如果一级默认默认赋值 监听一级的value给二级
if(Default1!=undefined||Default1!=null){
var provinceText = Default1;
console.log("一级默认");
$.each(provinceList,function(i,item){
if(provinceText == item.id){
cityItem=i;
return cityItem
}
});
}
//监听一级选项
form.on('select(yiji)',function(data){
var provinceText = data.value;
console.log("一级变化");
$.each(provinceList,function(i,item){
if(provinceText == item.name){
cityItem=i;
return cityItem
}
});
removeEle(city);
removeEle(town);
$.each(provinceList[cityItem].cityList,function(i,item){
addEle(city,item.name)
})
form.render();
})
//如果二级默认默认赋值 监听二级的value给三级
if(Default3==undefined||Default3==null){
if(Default2!=undefined||Default2!=null){
//默认值
var cityText = Default2;
console.log("二级默认");
$.each(provinceList,function(i,item){
if(provinceText == item.id){
cityItem=i;
return cityItem
}
});
$.each(provinceList[cityItem].cityList[two].areaList,function(i,item){
addEle(town,item.name)
})
}
}
//监听二级选项
form.on('select(erji)',function(data){
var cityText = data.value;
console.log('二级变化');
removeEle(town);
$.each(provinceList,function(i,item){
if(provinceText == item.id){
cityItem=i;
return cityItem
}
});
console.log(cityItem);
$.each(provinceList[cityItem].cityList,function(i,item){
if(cityText == item.name){
for(var n=0;n<item.areaList.length;n ){
console.log(item.areaList[n].name);
addEle(town,item.areaList[n].name)
}
}
});
form.render();
})
form.render();
})
}
}
exports('test', ZHC_Category);
});
模拟后台代码
{
"data":[
{
"id":1,
"name":"北京",
"cityList":
[
{
"id":11,
"name":"市辖区",
"areaList":[
{
"id":111,
"name":"东城区"
},
{
"id":112,
"name":"西城区"
},
{
"id":113,
"name":"怀柔区"
},
{
"id":114,
"name":"平谷区"
}
]
},
{
"id":12,
"name":"县",
"areaList":[
{
"id":121,
"name":"密云县"
},
{
"id":131,
"name":"延庆县"
}
]
}
]
},
{
"id":2,
"name":"上海",
"cityList":[
{
"id":21,
"name":"市辖区", "areaList":[
{
"id":211,
"name":"黄浦区"
},
{
"id":212,
"name":"卢湾区"
},
{
"id":213,
"name":"长宁区"
},
{
"id":214,
"name":"静安区"
},
{
"id":215,
"name":"普陀区"
},
{
"id":216,
"name":"宝山区"
},
{
"id":217,
"name":"虹口区"
},
{
"id":217,
"name":"青浦区"
},
{
"id":219,
"name":"南汇区"
}
]
},
{
"id":22,
"name":"县",
"areaList":[
{
"id":221,
"name":"崇明县"
}
]
}
]
},
{
"id":3,
"name":"天津",
"cityList":[
{
"id":31,
"name":"市辖区",
"areaList":[
{
"id":311,
"name":"和平区"
},
{
"id":312,
"name":"河东区"
},
{
"id":313,
"name":"河西区"
},
{
"id":314,
"name":"南开区"
},
{
"id":315,
"name":"河北区"
}
]
},
{
"id":32,
"name":"县",
"areaList":[
{
"id":321,
"name":"宁河县"
},
{
"id":322,
"name":"静海县"
},
{
"id":323,
"name":"蓟 县"
}
]
}
]
},
{
"id":4,
"name":"重庆",
"cityList":[
{
"id":41,
"name":"市辖区",
"areaList":[
{
"id":411,
"name":"万州区"
},
{
"id":412,
"name":"涪陵区"
},
{
"id":413,
"name":"渝中区"
},
{
"id":414,
"name":"大渡口区"
},
{
"id":415,
"name":"江北区"
}
]
},
{
"id":42,
"name":"县",
"areaList":[
{
"id":421,
"name":"綦江县"
},
{
"id":422,
"name":"潼南县"
},
{
"id":423,
"name":"彭水苗族土家族自治县"
}
]
},
{
"id":43,
"name":"市", "areaList":[
{
"id":431,
"name":"江津市"
},
{
"id":432,
"name":"合川市"
}
]
}
]
}
]
}
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论