LayUI 下拉框二级联动

一、实现效果

根据检查单位 生成不同的检查人

二、实现步骤

一、界面

        <div class="layui-form-item">
            <label class="layui-form-label">检查单位<i class="red-point">*</i></label>
            <div class="layui-input-block">
                <select id="checkUnit" name="checkUnit"  lay-search="" lay-verify="required" id="dutyUnitSelect" lay-filter="checkUnit">
                    <option value="">选择或搜索选择</option>
                    <c:forEach items="${departList}" var="item">
                        <option value="${item.id}">${item.departname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">检查人<i class="red-point">*</i></label>
            <div class="layui-input-block">
                <select id="checkPerson" name="checkPerson"  lay-search="" lay-verify="required" id="checkPersonSelect" lay-filter="checkPerson">
                    <option value="">选择或搜索选择</option>
                </select>
            </div>
        </div>

上面的检查单位的内容为单位数据  ${departList}   option的value是部门id，departname为部门名称，我这里是jsp，其他框架同理 

二、JS代码

引入 xmSelect

layUI监听的是整个form组件， 如果只想监听某一个元素，可以使用事件过滤器lay-filter

当单位被选择的时候，拿着部门id去后台查询，带回来人员信息，然后遍历拼接即可

        form.on('select(checkUnit)',(data)=>{
            let departId = data.value;
            $.ajax({
                url:'tbFineStdController.do?getUserListByDepartId&departId='+departId,
                type:'get',
                success:(data)=>{
                    let res = JSON.parse(data);
                    let userMapList = res.obj;
                    $("#checkPerson").empty();
                    $.each(userMapList,function(index,item){
                         $("#checkPerson").append("<option value="+item.value+">"+item.name+"</option>");
                    });
                    form.render("select");
                }
            })
        })

部分后台代码