form.val() 必须搭配 form.render('select') 才生效,因 Layui 的 select 是渲染后 UI 组件,原生 value 与视觉状态分离;多选传数组,value="0" 需手动设 selected 并 render;动态插入后必须 render 同步 UI,selected 属性在 JS 接管后无效。
form.val() 能设,但只写它没用;必须搭配 form.render('select') 才真生效。Layui 的 select 是渲染后的 UI 组件,原生 DOM 状态和视觉状态是分离的,跳过 render 这步,界面上永远“不动”。
用 form.val() + form.render('select') 是最稳路径
这是编辑页回显、搜索联动等场景的标准做法,前提是表单已初始化且 dom 就绪:
-
form.val()设置的是原始<select>元素的 value,Layui 仍能读取它 -
form.render('select')告诉 Layui:“去同步一下 UI,按当前 value 高亮对应项” - 如果 select 有
lay-filter="mySelect",推荐传第二个参数:form.render('select', 'mySelect'),避免重绘整个表单 - 多选要传数组:
form.val('myFilter', { 'tags': ['a', 'b'] })
value="0" 的选项默认不被识别,得手动打上 selected
后端返回 data.status === 0,执行 $('#status').val(0) 却没反应?不是 JS 失效,是 Layui 渲染时跳过了 value="0" 和空字符串的 option。
- 正确做法:先用 jQuery 定位并设属性:
$('#status').find('option[value="0"]').prop('selected', true) - 再调
form.render('select')同步 UI - 注意 HTML 中写的是
value="0"(字符串),不是value=0(无引号会被解析为空) - 动态插入时,确保
<option value="0">未启用</option>真的进了 DOM,别漏掉
异步加载完数据后,默认选第一项不能靠 selectedIndex = 0
直接改原生 select.selectedIndex 或写 <option selected> 在 Layui 渲染后无效——UI 不会跟着变。
- 必须在插入所有
<option>后,显式设置第一个的selected属性:$('#area').html('<option value="1" selected>北京</option> <option value="2">上海</option>') - 紧接着调
form.render('select'),否则高亮状态不会出现 - 如果是 AJAX 成功回调里操作,确保 append 或 html() 已完成(DOM 插入是同步的,不用 setTimeout)
- 用
done回调(如table配置里的)比success更可靠,因 DOM 渲染更确定
别信 selected 属性在 JS 干预后还管用
HTML 里写 <option value="2" selected>上海</option> 只对纯静态页面有效。一旦你调过 form.render() 或任何 JS 修改,Layui 就接管了状态,selected 属性会被忽略。
- JS 初始化赋值时,统一走
form.val()+form.render() - 模板里硬编码
selected仅用于首屏直出,上线前务必验证是否真被渲染出来 - Vue 项目里混用 Layui select,还要额外触发
change事件同步 v-model
selected 属性在 JS 接管后还能起效。这三处不对齐,form.val() 再调十遍也没用。


















