嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 5 元微信扫码支付：5 元
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
模块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":"合川市"
}
]
}
]
}
]
}