必须手动调用form.render("select"),否则新加载的选项永远不显示;因layui不监听dom变更,需在插入后立即执行该方法,并确保在layui.use(["form"])内、目标select位于layui-form容器中且含lay-filter属性。

必须手动调用 form.render("select"),否则新加载的选项永远不显示——Layui 不监听 DOM 变更,也不自动重绘下拉面板。
为什么动态加载后下拉框看起来是空的
Layui 的 <select></select> 是基于原生元素二次封装的,初始化后就“冻结”了 DOM 快照。你用 $.append()、innerHTML 或 document.createElement 插入新 <option></option>,它根本不知道发生了什么。常见现象包括:点击下拉箭头没反应、面板里只显示“无数据”、或者旧选项还在但新选项完全不可见。
- 不是浏览器缓存问题,也不是后端返回格式错(只要返回的是数组或合法 HTML 字符串)
- 根本原因就是没触发重绘 ——
form.render("select")这一步被跳过了 - 即使你用
form.val()设置了值,如果对应<option value="xxx"></option>还没渲染进 DOM,选中状态也不会高亮
form.render("select") 的调用时机和范围怎么控制
调早了 DOM 不存在,调晚了用户已经点了两次下拉框;传错参数会导致重绘失败或误刷其他控件。
- 必须在插入新
<option></option>后**立即执行**,例如:$("#citySelect").append(html); form.render("select"); - 如果页面有多个表单区域,建议传第二个参数(
lay-filter值),避免全局重绘:form.render("select", "area-form") - 要只刷新某一个 select,用第三个参数传其**直接父容器节点**:
form.render("select", null, document.querySelector(".city-wrap"))(注意不是传<select></select>自身) - 千万别写成
form.render("selects")或form.render()(无参),前者参数名错,后者会重绘所有表单元素,可能清掉其他已选值
动态加载时容易漏掉的前置条件
光调 form.render("select") 不够,模块没加载、容器结构不对、数据没挂对字段,都会让渲染静默失败。
-
layui.use(["form"], function() { ... })必须包裹所有操作,否则form是undefined - 目标
<select></select>必须位于带有class="layui-form"的容器内(可以是<form></form>、<div> 等),不能只给 select 加 class <li>AJAX 返回的数据如果是对象数组,要确保每个项都有 <code>value对应的字段(比如后端返回{id: 1, name: "北京"},那你得写option.value = item.id,不能直接塞item.name) - 用
$("#sel").empty()清空,别用.html(""),某些版本会破坏 Layui 内部结构
最常被忽略的点是:弹层(layer.open)里的 select,必须在弹层内容加载完成后的回调里重新 layui.use("form"),再调 form.render("select")——父页面的 form 实例对子 DOM 无效。











