Layui二级联动和多级联动

一、筛选框代码

<form class="layui-form" action="">             <label class="layui-form-label">公司：</label>               <div class="layui-inline">                 <select name="companyId" lay-verify="required" lay-filter="companyId" id="companyId" lay-search>                     <option value="">请选择公司</option>                 </select>             </div>              部门:             <div class="layui-inline">                 <select name="departmentId" lay-verify="required" lay-filter="departmentId" id="departmentId"                         lay-search>                     <option value="">请选择部门</option>                 </select>             </div>              二级部门:             <div class="layui-inline">                 <select name="departmentSecondId" lay-verify="required" lay-filter="departmentSecondId"                         id="departmentSecondId" lay-search>                     <option value="">请选择二级部门</option>                 </select>             </div>              状态:             <div class="layui-inline">                 <select name="deleted" lay-verify="required" lay-filter="deleted" id="deleted" lay-search>                     <option value="">请选择状态</option>                     <option value="0">存在</option>                     <option value="1">已删除</option>                 </select>             </div>              <button type="button" class="layui-btn" data-type="reload" id="search">搜索</button>             <button type="reset" class="layui-btn">重置</button>         </form>

二、Ajax实现

 layui.use(['element', 'form'], function () {         var element = layui.element,             form = layui.form;          $(function () {             $.ajax({                 async: false,                 type: "POST",                 url: ctxPath + 'company/selectAll',                 success: function (result) {                     if (result.code == 0) {                         var list = result.data;                         var s = '<option value="">请选择公司</option>';                         $.each(list, function (i, company) {                             console.log(company.name);                             s = s + '<option value="' + company.id + '">' + company.name + '</option>';                         });                         $("#companyId").html(s);                         form.render('select');                     }                 }             });         });          form.on('select(companyId)', function (data) {             var companyId = data.value;             var s = '<option value="">请选择部门</option>';             if (companyId == '') {                 $("#departmentId").html(s);                 form.render('select');             } else {                 $.ajax({                     async: false,                     type: "POST", //提交方式                     url: ctxPath + 'department/selectAllDepartmentByComId',//路径                     data: {                         companyId: companyId                     },                     success: function (result) {                         if (result.code == 0) {                             var list = result.data;                             $.each(list, function (i, department) {                                 s = s + '<option value="' + department.id + '">' + department.name + '</option>';                             });                             $("#departmentId").html(s);                             form.render('select');                         }                     }                 });             }         });

 

 

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！

 

 

 

来源：51CTO

作者：李布斯001

链接：https://blog.csdn.net/libusi001/article/details/100688742