layui select异步加载时需手动在.layui-select-title内显示loading图标并加layui-anim-loop类,请求后调用form.render('select')刷新;禁用须操作.layui-select-title而非原生select。

layui select 异步加载时怎么显示 loading 状态
直接给 select 元素加 loading 效果不行——layui 的原生 select 渲染后会被替换成自定义 DOM,loading 必须作用在下拉触发区域(即 .layui-select-title 内部),且要手动控制显隐。
核心思路:在发起异步请求前,把下拉框标题区的文本临时替换成「加载中…」并加个旋转 class;请求结束后还原,并重新渲染 layUI 的 select 组件。
如何用 layui.form.render() 配合异步数据更新 select
layui 不支持 select 动态追加 option 后自动生效,必须调用 form.render()。但要注意两点:
- 只传
'select'参数即可,不用指定 filter —— 多次调用无副作用,但漏掉会不生效 - 必须等 DOM 插入完成后再调用,否则新
option会被忽略 - 如果 select 已经被渲染过(比如页面初始化时就有),
form.render('select')是唯一可靠方式
示例片段:
$.get('/api/options', function(res) {
var $select = $('#mySelect');
$select.empty();
$.each(res.data, function(i, item) {
$select.append('<option value="' + item.value + '">' + item.label + '</option>');
});
layui.form.render('select'); // 关键:不能少
});
layui.select 没有内置 loading 接口,得自己 patch 标题区
layui 2.8+ 的 select 渲染后结构固定:.layui-select-title > input[readonly] 是点击区域,它的父容器可安全注入 loading 提示。常见错误是直接改 input 的 value,会导致点击失焦或无法触发下拉。
推荐做法(兼容所有版本):
- 用
$('.layui-select-title').html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-loop"></i> 加载中…') - 请求成功后,再用原始 HTML 或
form.render()触发重绘,自动恢复标题 - 失败时记得手动还原标题,否则用户会卡在 loading 状态
注意:layui-anim-loop 是必须的,否则图标不转;若项目禁用了动画,需额外加 CSS 补充 animation: spin 1s infinite。
为什么 disabled 属性对 layui select 无效
因为 layui 把原生 select 隐藏了,真正响应的是它生成的 .layui-select-title 区域。直接设 disabled="true" 只禁用原始标签,对 UI 无影响。
正确禁用方式(配合 loading 使用):
- 加 class:
$('.layui-select-title').addClass('layui-disabled') - 阻止事件:
$('.layui-select-title').off('click').on('click', function() { return false; }) - 还原时,用
removeClass('layui-disabled')并重新绑定 click 事件(或直接触发form.render())
loading 和禁用必须同步处理,否则用户可能在加载中多次点击,触发重复请求。
最易被忽略的一点:异步加载的 select 如果设置了 lay-search,搜索框会保留旧内容,需要在重绘前手动清空 $('.layui-select-search input').val('')。


















