弹出层中 select 不显示是因渲染未到位或 DOM 层级被截断,需确保父容器含 layui-form 类、正确加载 form 模块,并在 layer.open 的 success 回调中调用 form.render('select')。
弹出层里 select 不显示,基本就是渲染没到位或 dom 层级被截断,不是 bug,是 layui 的渲染机制和 layer 的 z-index 限制共同导致的。
必须确保父容器有 layui-form 类且正确加载 form 模块
layui 不会自动识别任意位置的 select,它只处理包裹在 class="layui-form" 容器内的表单元素。哪怕你用的是 div 或 form 标签,也得显式加这个 class。
- 动态插入的弹窗内容(比如
layer.open({content: '<select>...</select>'}))中,select必须放在带layui-form的父元素里,否则form.render()无效 -
layui.use('form', function(){...})必须执行,否则form实例不存在,调form.render()会报Uncaught TypeError: Cannot read property 'render' of undefined - 如果页面已全局加载过
form,但弹窗是异步拉取 HTML 片段,仍需在success回调里再次获取实例(避免闭包中引用旧实例)
弹窗内 select 必须在 success 中调用 form.render()
layer 渲染弹窗是异步的,DOM 插入完成前就调 form.render(),等于对不存在的节点操作——白做。
- 务必把
form.render('select')放在layer.open的success回调里,而不是yes或直接写在open外面 - 若弹窗内容来自已有 DOM 节点(如
content: $('#myForm')),也要在success里调,因为 layer 会 clone 节点并重置事件绑定 - 推荐写法:
form.render('select', 'your-filter-name'),用lay-filter做局部刷新,避免影响其他区域
下拉面板被遮挡?优先用 lay-append-to="body"
Layui 2.9.12+ 版本起,select 支持 lay-append-to 属性,这是最干净的解法,比调 z-index 安全得多。
- 给
select加上lay-append-to="body"和lay-append-position="fixed",下拉面板就会脱离弹窗 DOM 树,挂载到<body>下 - 注意:该属性仅对开启了搜索(
lay-search)或启用了 layUI 内置下拉的select生效;纯原生select不走这套逻辑 - 若用的是老版本(z-index 风险高:layer 默认
z-index: 19891014,select 面板默认z-index: 10000,调低 layer 的z-index可能导致遮罩层失效或按钮失焦
表格行内 select 不显示?重点查 done 回调和 overflow
table 的 templet 生成的 select 属于“二次插入”,渲染时机更敏感,且表格单元格常带 overflow: hidden。
- 必须在
table.render的done回调里调form.render('select'),不能靠初始渲染 - 加上
$(".layui-table-body, .layui-table-box").css('overflow', 'visible'),否则下拉面板会被表格容器裁剪 - 如果用了
tableSelect组件,还要确认后端返回数据结构是否为数组,且字段名是data(不是list或rows),否则表格空白无报错
最容易被忽略的是:lay-filter 值重复或缺失,会导致 form.render('select', 'xxx') 找不到目标容器;而直接 form.render() 又可能触发其他区域意外重绘。实际项目里,建议每个弹窗表单都配独立 lay-filter,并在 success 中精准刷新。


















