layui select动态增加option后如何刷新页面

layui select 动态添加 option 后需调用 form.render('select') 才能重绘 UI；必须确保在 DOM 插入完成后执行，且 val() 值须与新 option 的 value 严格一致。

layui select 动态加 option 后不显示？必须调 form.render('select')

直接往 <select> 里用 append() 或 html() 加了 <option>，但下拉面板还是空的、点不开、或选不中——不是代码没执行，是 Layui 压根没重绘 UI。它不监听 DOM 变化，只认你手动告诉它“该刷新了”。

1. form.render('select') 是唯一有效触发重绘的方式，参数必须是字符串 "select"，不能写成 "selects" 或漏掉
2. 如果页面有多个表单容器，且用了 lay-filter="myForm"，推荐传第二个参数：form.render('select', 'myForm')，避免全局重绘影响其他 select
3. 务必确保 layui.use(['form'], function() { ... }) 已加载，否则调用会报 form is not defined
4. 别在 AJAX 请求发出前就调 form.render()，必须放在 success 回调里，等 DOM 插入完成后再执行

为什么 render 之后还是显示“请选择”？检查 selected 和 value 同步

即使 form.render('select') 成功执行，UI 仍卡在默认提示，大概率是新插入的 <option> 没带 selected 属性，或者 JS 里设的 val() 找不到匹配项。

1. 动态插入时，不要依赖 HTML 的 selected 属性——Layui 渲染后会忽略它；正确做法是插入完再用 $('#mySelect').val('xxx') 设值，再 form.render('select')
2. 确保 val('xxx') 中的 xxx 确实存在于刚插入的 <option value="xxx"> 里，大小写、空格、引号都要严格一致
3. 如果初始 <select> 里没有 <option value="">请选择</option>，Layui 默认会补一个，但此时你设 val('') 才能高亮它

用 form.select.options 批量更新更稳，但要注意版本

Layui 2.8+ 提供了内部映射表 form.select.options，绕过 DOM 操作，直接喂数据给渲染逻辑，适合后端返回对象数组的场景（比如 [{value: '1', title: '北京'}]）。

1. 先确认目标 <select lay-filter="city">，然后执行：form.select.options['city'] = newDataArray
2. 再调 form.render('select', 'your-form-filter')，它会自动读取这个 key 对应的新数组并重绘
3. 2.7 及更早版本没有 form.select.options，访问会得 undefined，必须降级用 DOM 方案
4. 此方式天然规避 HTML 转义问题（比如 title 含 &），也避免 value 和显示文本不一致的坑

联动场景下，二级 select 清空后必须 render 两次

一级 select 改变时，二级要清空、填新选项、再设默认值——但很多人只清空 <option> 就结束，结果 UI 残留旧选项，或“请选择”不生效。

1. 清空：用 $('#city').empty()（别用 .html('')，某些版本会破坏结构）
2. 填新：插入新 <option> 后，立刻 $('#city').val('')（确保默认提示被激活）
3. 刷新：必须再调一次 form.render('select', 'filterName')，否则视觉不同步，用户看到的还是上次的选项
4. 如果一级还没选就点了二级，建议在 form.on('select(province)') 里做兜底：if (!value) { $('#city').empty().val(''); form.render('select', 'xxx'); }

实际操作中最容易被跳过的，是「插入 DOM」和「调 render」之间那毫秒级的顺序依赖——哪怕多一个异步延迟，val() 就可能找不到目标值。Layui 不帮你等 DOM 就绪，它只信你传进去的那一刻。