Loading... # 前言 一个大学生老乡非常热爱学习,经常问我一些问题,我也善于解答,虽说目前没当成老师,但是为祖国培养建设性人才我也是做了不少贡献 最近老乡问我说他们老师教了一个layui的二级联动,他自己拓展了三级联动,有bug 问我咋修复咋写,我打开他代码一看, 不忍直视 一堆接一堆的完全看不懂 我就在他那个基础上重写了一个三级联动 先来给你们看一下老乡的代码 ```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="https://layui.11dz.cn/layui/dist/css/layui.css" media="all"> </head> <body> <form class="layui-form" action=""> <div class="layui-form-item" style="margin-top: 100px;"> <label class="layui-form-label">联动选择框</label> <div class="layui-input-inline"> <select name="quiz1" lay-filter="xueyuan"> <option value="">请选择学院</option> <option value="xxxy">信息学院</option> <option value="rjxy">软件学院</option> <option value="gjxy">国际学院</option> </select> </div> <div class="layui-input-inline"> <select name="quiz2" id="zy" lay-filter="zhuanye"> <option value="">请选择专业</option> </select> </div> <div class="layui-input-inline"> <select name="quiz3" id="bj" lay-filter="bj"> <option value="">请选择班级</option> </select> </div> </div> </form> <script src="https://layui.11dz.cn/layui/dist/layui.js" charset="utf-8"></script> <script> layui.use(['form', 'layedit', 'laydate'], function() { var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate; //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function(value) { if (value.length < 5) { return '标题至少得5个字符啊'; } }, pass: [ /^[\S]{6,12}$/, '密码必须6到12位,且不能出现空格' ], content: function(value) { layedit.sync(editIndex); } }); //监听指定开关 form.on('switch(switchTest)', function(data) { layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function(data) { layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; }); //表单赋值 layui.$('#LAY-component-form-setval').on('click', function() { form.val('example', { "username": "贤心" // "name": "value" , "password": "123456", "interest": 1, "like[write]": true //复选框选中状态 , "close": true //开关状态 , "sex": "女", "desc": "我爱 layui" }); }); //表单取值 layui.$('#LAY-component-form-getval').on('click', function() { var data = form.val('example'); alert(JSON.stringify(data)); }); }); </script> <script> layui.use(['layer', 'form'], function() { var form = layui.form, layer = layui.layer; var $ = layui.jquery; form.on('select(xueyuan)', function(data) { var val1 = data.value; $("#zy").empty(); if (val1 == "xxxy") { $("#zy").append("<option value='jsj'>计算机</option>"); $("#zy").append("<option value='wlw'>物联网</option>"); } if (val1 == "rjxy") { $("#zy").append("<option value='xnxs'>虚拟现实</option>"); $("#zy").append("<option value='rjgc'>软件工程</option>"); } if (val1 == "gjxy") { $("#zy").append("<option value='cima'>CIMA</option>"); $("#zy").append("<option value='acca'>ACCA</option>"); } form.render('select'); }); form.on('select(zhuanye)', function(data) { var val2 = data.value; $("#bj").empty(); if (val2 == "jsj") { $("#bj").append("<option value='jsj1'>计算机2019-1</option>"); $("#bj").append("<option value='jsj2'>计算机2019-2</option>"); $("#bj").append("<option value='jsj3'>计算机2019-3</option>"); } if (val2 == "wlw") { $("#bj").append("<option value='wlw1'>物联网2019-1</option>"); $("#bj").append("<option value='wlw2'>物联网2019-2</option>"); } if (val2 == "xnxs") { $("#bj").append("<option value='xnxs1'>虚拟现实2019-1</option>"); $("#bj").append("<option value='xnxs2'>虚拟现实2019-2</option>"); } if (val2 == "rjgc") { $("#bj").append("<option value='rjgc1'>软件工程2019-1</option>"); $("#bj").append("<option value='rjgc2'>软件工程2019-2</option>"); $("#bj").append("<option value='rjgc3'>软件工程2019-3</option>"); $("#bj").append("<option value='rjgc4'>软件工程2019-4</option>"); } if (val2 == "cima") { $("#bj").append("<option value='cima1'>CIMA2019-1</option>"); $("#bj").append("<option value='cima2'>CIMA2019-2</option>"); } if (val2 == "acca") { $("#bj").append("<option value='acca1'>ACCA2019-1</option>"); $("#bj").append("<option value='acca2'>ACCA2019-2</option>"); $("#bj").append("<option value='acca3'>ACCA2019-3</option>"); } form.render('select'); }); form.on('submit(demo1)', function(data) { }); }); </script> </body> </html> ``` > 然后是我帮老乡修改后的代码 ```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="https://layui.11dz.cn/layui/dist/css/layui.css" media="all"> </head> <body> <form class="layui-form" action=""> <div class="layui-form-item" style="margin-top: 100px;"> <label class="layui-form-label">联动选择框</label> <div class="layui-input-inline"> <select name="quiz1" lay-filter="filter_college"> <option value="">请选择学院</option> </select> </div> <div class="layui-input-inline"> <select name="quiz2" id="zy" lay-filter="filter_career"> <option value="">请选择专业</option> </select> </div> <div class="layui-input-inline"> <select name="quiz3" id="bj" lay-filter="filter_class"> <option value="">请选择班级</option> </select> </div> </div> </form> <script src="https://layui.11dz.cn/layui/dist/layui.js" charset="utf-8"></script> <script> var $; let fun = { add: function(filter, value, name) { $(`[lay-filter='${filter}']`).append(`<option value='${value}'>${name}</option>`); }, restore: function(filter, def) { $(`[lay-filter='${filter}']`).find("option").remove(); this.add(filter, '', def); } } const datas = [{ name: "信息学院", value: "xxxy", list: [{ name: "计算机", value: "career1", list: [{ name: "计算机2019-1", value: "class_1" }, { name: "计算机2019-2", value: "class_2" }, { name: "计算机2019-3", value: "class_3" }] }, { name: "物联网", value: "career2", list: [{ name: "物联网-1", value: "class_4" }, { name: "物联网-2", value: "class_5" }, { name: "物联网-3", value: "class_6" }] }] }, { name: "软件学院", value: "rjxy", list: [{ name: "开发软件", value: "kfrj", list: [{ name: "开发软件-1", value: "class_7" }, { name: "开发软件-2", value: "class_8" }, { name: "开发软件-3", value: "class_9" }] }, { name: "卑微码农", value: "bwmn", list: [{ name: "卑微码农-1", value: "class_10" }, { name: "卑微码农-2", value: "class_11" }, { name: "卑微码农-3", value: "class_12" }] }] }] layui.use(['layer', 'form'], function() { var form = layui.form, layer = layui.layer; $ = layui.jquery; //初始化 $(() => { datas.forEach(i => { fun.add('filter_college', i.value, i.name); form.render('select'); }) }); form.on('select(filter_college)', function(data) { let type = 'filter_career'; fun.restore(type, '请选择专业') fun.restore('filter_class', '请选择班级') datas.forEach(i => { if (i.value == data.value) { i.list.forEach(i => { fun.add(type, i.value, i.name); }) } }) form.render('select'); }); form.on('select(filter_career)', function(data) { let type = 'filter_class'; fun.restore(type, '请选择班级') datas.forEach(i => { i.list.forEach(i => { if (i.value == data.value) { i.list.forEach(i => { fun.add(type, i.value, i.name); }) } }) }) form.render('select'); }); }); </script> </body> </html> ``` > 那些 name id 可不是我起的哈 , 老乡(大学生) 起的,我重写他这个除了id name啥的没改 其余都改了 最后修改:2021 年 11 月 20 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏