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

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

关键代码：

1. 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渲染顺序不一样】

2. 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');
       });

3. form表单渲染

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