要实现 layui 下拉框点击才加载数据,需禁用自动请求:不传 url、初始 disabled,监听 .layui-select-title 点击,用状态锁防重复,请求后替换 option 并 form.render('select', 'filter')。

layui 下拉框 click 时才触发远程加载
默认 layui.select 的 url 参数会在渲染时自动发起请求,这不是“点击才加载”。要实现真正的懒加载(click 触发),必须绕过内置的 url 自动行为,改用手动控制。
禁用自动加载并监听 click 事件
关键点是:不传 url,把下拉框设为 disabled 初始状态,等用户点击再启用并手动拉取数据。否则即使没设 url,某些版本的 layui(尤其 2.8+)仍可能因 elem.next() 渲染逻辑触发空请求或报错。
- 给
select元素加lay-filter="mySelect",便于监听 - 初始化时不调用
form.render('select'),避免提前渲染 - 用
$(document).on('click', '.layui-select-title', ...)捕获点击(因为真实下拉触发区域是.layui-select-title) - 首次点击后,用
$.get()请求数据,拼成option字符串,注入到select内,再执行form.render('select')
防止重复请求和 loading 状态处理
用户快速连点、或下拉已展开时再点标题,都可能导致多次请求或 DOM 错乱。需要状态锁 + 条件判断:
- 用一个变量如
isLoaded = false标记是否已加载过 - 在 click 回调开头加
if (isLoaded || $('select[name="xxx"]').next().hasClass('layui-hide')) return; - 点击后立即给
.layui-select-title加layui-disabled类,内部显示 “加载中…” 文本(可选) - 请求成功后移除禁用态、更新
isLoaded = true,再调用form.render()
注意:不要在请求前清空 select 的 option —— 否则用户第一次点击后看到空白再闪现选项,体验差;应只在请求返回后再替换内容。
兼容性与 layui 版本差异
layui 2.7.x 和 2.8.x 对 form.render() 的行为略有不同:2.8+ 在已有下拉展开状态下再次 render 可能不刷新选项列表。稳妥做法是:
- 请求完成后,先
$('select[name="xxx"]').empty() - 再
.append(...)新的option - 最后
form.render('select', 'your-filter')(第二个参数必须传 filter 值)
如果用了 layUI 的模块化引入(layui.use(['form'], ...)),确保 form 实例已就绪再绑定 click;否则 form.render 可能未定义。
最易被忽略的是:下拉框的 name 属性必须存在且唯一,否则 form.render 找不到对应元素;另外,服务端返回的数据格式必须是纯 HTML option 片段(如 <option value="1">苹果</option>),不能是 JSON —— layui 不会自动转换。


















