一、筛选框代码
<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