layui动态渲染select等组件并初始化赋值失败-CSDN博客

描诉：有一个用户信息form表单，其中有部门单选框，数据库中有一张dept（部门）表，要动态渲染出所有部门，并默认选中用户所在部门

关键代码：

html页面

    <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <input type="hidden" name="deptHide" class="layui-input deptHide"><!--中间变量-->
        <div class="layui-input-inline">
            <select name="deptId" lay-filter="sysBunk" id="deptId" class="deptId" lay-search="" disabled></select>
        </div>
    </div>

【必须使用中间变量赋值，因为layui渲染顺序不一样】

select渲染

    $.post("数据接口", function (data) {
        $.each(data.data, function (index, item) {
            $('#deptId').append(new Option(item.deptName, item.deptId));
        });
        $('#deptId').val($('.deptHide').val()); //部门单选框选中
        //重新渲染select
        form.render('select');
    });

form表单渲染

//infoList 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
form.val("userInfo", {//表单回显
      "xxx": data.data.xxx,  //"name": "value",就是表单元素的name
      "deptHide": data.data.deptId,  //中间变量--因为表单渲染的优先级高于select等组件的优先级
 });
form.render();