layui表单控件需用form.val()配合form.render()同步ui状态,原生dom操作无效;input/textarea、select、radio/checkbox动态赋值后必须调用对应render方法,否则界面不更新。

直接用 form.val() 配合 form.render(),其他写法基本都失效——Layui 的表单控件是渲染后的 UI 组件,原生 DOM 属性和视觉状态不联动。
input / textarea 默认值:value 属性够用,但 JS 动态赋值要 render
纯静态场景下,value="xxx" 能直接显示;但如果你用 JS 修改过(比如从接口取数后填入),必须调 form.render('text') 或 form.render() 同步 UI。否则界面上看着没变,实际 DOM 值已更新。
-
value只在页面首次加载时生效,后续 JS 改值不会自动刷新 UI - 填完数据后漏掉
form.render('text'),用户看到的还是旧内容 - 如果 input 有
lay-verify,render 不会影响校验逻辑,但能确保 placeholder、边框状态等样式同步
select 默认选中:form.val() + form.render('select') 是唯一稳路径
form.val('filterName', { 'mySelect': '2' }) 设置值,再紧跟着 form.render('select') —— 少一步都不行。Layui 不监听原生 select.value 变化,只靠 render 主动读取并高亮。
- 多选要传数组:
form.val('filterName', { 'tags': ['a', 'b'] }) - 带
lay-filter="mySelect"的 select,推荐form.render('select', 'mySelect'),避免重绘整个表单 - 动态插入
option后,必须先设好selected属性(或用form.val()),再form.render('select');光 append option 不会自动选第一项
radio / checkbox 默认选中:HTML checked 属性仅限初始加载,JS 控制必须 render
服务端直出时写 checked 没问题;但 AJAX 返回数据后动态设默认值,得用 form.val() 再 form.render('radio') 或 form.render('checkbox')。
- 不要用
$('input[name="sex"]').val(['男']),Layui 不认 jQuery 的 val 设 radio - 正确做法:
form.val('filterName', { 'sex': '男' }),然后form.render('radio') - 如果 radio 选项是异步加载的(比如根据地区加载城市),要在所有
input[type="radio"]插入 DOM 后再调 render,否则新选项不参与状态绑定
value="0" 的 select 选项总是不生效?类型和存在性必须对齐
后端返回 data.status === 0,但 form.val('status', 0) 没反应,不是 API 失效,而是 Layui 渲染时跳过了字符串 "0" 和空字符串的 option。
- HTML 中必须写成
<option value="0">未启用</option>(带引号) - JS 中设值要用字符串:
form.val('status', '0'),或手动定位:$('#status').find('option[value="0"]').prop('selected', true) - 之后必须跟
form.render('select'),否则 UI 不高亮 - 如果选项是 AJAX 加载的,确保
value="0"的option真的进了 DOM,别被模板逻辑过滤掉
最常被忽略的点是:无论你用什么方式改了原始 DOM 的值,Layui 都不会自动感知——它只信任自己 render 过程中读到的状态。所以 form.render() 不是可选项,是必选项。











