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

最新推荐文章于 2024-07-24 23:16:01 发布

扫地鼠Gordon

最新推荐文章于 2024-07-24 23:16:01 发布

阅读量803

点赞数

文章标签： layui 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_28137309/article/details/129731319

版权

描诉：有一个用户信息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渲染。js部分

$.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();