不调用form.render()会导致select UI不更新;必须在修改原生select的value或innerHTML后调用,推荐form.render('select')或指定容器ID,启用lay-search时需确保value同步后再渲染。

select动态赋值后不调用form.render()会怎样
表单元素不会更新UI,看起来“没生效”——Layui的select是用原生<select>生成的伪DOM,赋值只改了原始标签的value,但下拉菜单、选中样式、图标状态全靠form.render()驱动重绘。
哪些操作必须配form.render()
只要改动了原生<select>的value或innerHTML(比如innerHTML = '<option value="2">北京</option>'),就必须手动触发渲染。常见场景包括:
- 用
document.getElementById('xxx').value = '2'直接赋值 - 用
layui.form.val('filter', {xxx: '2'})设值后,该select不在初始加载的表单内(比如异步插入的DOM) - 动态清空/重写
<option>后再设值
form.render()的参数影响范围
不传参时,默认只渲染当前页面所有Layui表单;但性能差,且可能误触其他区域。更稳妥的做法是限定范围:
-
form.render('select'):只重绘所有select,推荐用于局部更新 -
form.render('select', 'demo'):只重绘class="layui-form" id="demo"容器内的select - 千万别写
form.render('select', 'xxx')却把xxx当成class名——第二个参数必须是容器的id,否则静默失败
容易被忽略的兼容细节
在layui 2.8+里,如果select启用了lay-search,仅调用form.render('select')还不够:搜索框输入框是独立DOM,需额外确保原始<select>的value已同步,否则点开下拉时高亮错位或默认选项丢失。
最稳的写法是两步走:document.querySelector('#mySelect').value = '3';layui.form.render('select', 'myForm');
动态增删<option>后,别忘了先设value再render,顺序反了就白忙活。


















