根本原因是Layui不监听DOM变化，必须手动调用form.render("select")通知重绘；需确保在layui.use(["form"], callback)内执行、select有lay-filter属性、DOM插入完成后再调用，且顺序为改DOM→render→form.val()。
动态添加
根本原因不是 dom 没改成功，而是 layui 根本没“看见”变化——它不监听 innerhtml、append() 或 empty() 这类操作。你清空、拼接、插入都对，但没告诉 layui：“这 select 变了，重画一下”。
- 必须调用
form.render("select")，参数是字符串"select"，不是"selects"、"Select"，也不能省略 - 如果目标
select在某个form容器里且带lay-filter="myForm"，推荐传第二个参数：form.render("select", "myForm")，避免全局重绘影响性能 - 别用
.html("")清空，某些版本会破坏 Layui 封装结构；改用.empty()或.children().remove() - 确保新插入的
<option>有合法value属性，否则后续form.val()无法匹配
调了form.render("select")但还是没反应
大概率是执行时机或上下文错了。Layui 的 form 模块不是全局可用的，它得先加载、再初始化，才能用。
- 所有涉及
form的操作（包括render和val）必须写在layui.use(["form"], callback)内部，否则控制台会报form is not defined - 检查目标
select是否已加lay-filter属性，比如<select lay-filter="areaSelect">；没这个属性，form.render("select", "areaSelect")就找不到作用范围 - 在浏览器开发者工具里看该
select元素是否多了lay-id属性：没有，说明form.render()根本没生效或执行失败 - 异步场景（如 Ajax 回调）里，确认
form.render()是在数据插入 DOM 后立即执行的，别被闭包或 this 指向带偏
form.val()设值成功但下拉框不显示选中项
这是最迷惑人的现象：控制台查 form.val("myFilter") 返回了正确值，UI 却卡在“请选择”上。问题出在“值存在”和“选项存在”不是一回事。
-
form.val("myFilter", {city: "shanghai"})中的city必须和select的name属性完全一致，大小写、拼写都不能错 - 设值前，确保对应
value="shanghai"的<option>已存在于 DOM 中，且已被form.render("select")处理过 - 不要在
form.render()前调form.val()，顺序必须是：改 DOM →form.render("select", "filter")→form.val("filter", {...}) - 如果用 jQuery 直接设
$("#mySelect").val("shanghai")，Layui 内部状态不会同步，UI 不更新
跨域或本地打开 JSON 数据不加载
这不是渲染问题，是数据根本没拿到。尤其用本地 file:// 打开页面时，Ajax 加载 JSON 会因浏览器同源策略直接失败，下拉框自然空着。
- 开发阶段别双击 HTML 文件打开，用
http-server、live-server或 Nginx 启一个本地服务 - 确认 Ajax 请求返回的是纯 JSON 数组（如
[{"value":"bj","title":"北京"}]），不是带 HTML 标签或包裹字段的响应 - 在回调里加
console.log(data)，确保数据真实到达；空数组或undefined会导致append()什么也不做 - 如果后端返回字段名和前端期望不一致（比如后端是
id/name，前端硬写value/title），拼option时就会漏掉 value，导致选中失效
option，再看有没有 lay-id，最后查控制台有没有 form is not defined 或网络请求失败——三步下来，90% 的“不显示”都能定位到具体哪一环断了。 
