form.val() 必须配合 form.render('select') 才生效,因 Layui select 是渲染组件,DOM value 与 UI 状态分离;value="0" 需带引号且需 jQuery 显式设选中再 render;动态加载选项后须在 DOM 插入完成后再调用 form.val() 和 form.render()。

form.val() 必须搭配 form.render('select') 才生效,否则界面上完全没反应——这是最常被忽略的硬性前提。
为什么直接 $('#mySelect').val(1) 不起作用
Layui 的 select 是渲染后的 UI 组件,原生 <select> 元素的 value 属性和视觉状态是分离的。你改了 DOM 的 value,Layui 并不知道,UI 也不会同步。
- 只调
$('#mySelect').val(1):DOM 值变了,但下拉框标题栏、高亮项都还是旧的 - 只调
form.render('select'):UI 重绘,但会按当前 DOM 的value(可能还是空或默认值)去匹配 - 必须两者配合:先设值,再通知 Layui 重绘 UI
后端返回 value="0" 时怎么处理
这是高频翻车点:form.val() 和 .val(0) 都会静默失败,因为 Layui 渲染逻辑会跳过 value="" 和 value="0" 的 <option>。
- 确保 HTML 中写的是
<option value="0">未启用</option>,不是value=0(无引号会被解析为空) - 用 jQuery 显式设置选中状态:
$('#mySelect').find('option[value="0"]').prop('selected', true) - 紧接着调
form.render('select'),不能省 - 如果
mySelect有lay-filter="status",推荐写成form.render('select', 'status'),避免重绘整个表单
动态加载选项后回显的正确时机
AJAX 加载完 <option> 后,不能立刻 form.val(),必须等 DOM 插入完成且元素就绪。
- 在
success或更可靠的done回调里操作,不要用async: false - 插入选项后,立即设置值并渲染:
$.get('/api/status', function(res) { $('#status').html(res.data.map(d => `<option value="${d.id}">${d.name}</option>`).join('')); form.val('statusFilter', { 'status': res.selectedId }); // res.selectedId 是数字或字符串 form.render('select', 'statusFilter'); }); - 别信
<option selected>:Layui 渲染后这个属性就被忽略了,必须走 JS 路径
真正卡住人的从来不是“怎么写代码”,而是 value="0" 在 HTML 解析、jQuery 匹配、Layui 渲染三层里各被当成不同东西——类型不对齐、属性没落进 DOM、render 没跟上,任意一环断掉,界面就静默失败。
















