layui select异步加载后默认选中第一项必须先插入带selected属性的option,再调用form.render('select');仅操作原生DOM或设置selectedIndex无效,因layui渲染后需手动通知重绘。
layui select 异步加载后默认选中第一项必须调用 form.render('select')
直接在 select 标签里写 <option selected> 或 js 设置 selectedindex = 0 都无效 —— 因为 layui 的 select 是渲染后的自定义下拉,原生 dom 操作不触发样式同步。真正起效的只有两步:先填好 option,再显式通知 form 模块重绘。
异步请求回来的数据要手动插入 select 并设 selected
不能只靠 $.get() 后 append 就完事。Layui 不会自动识别新 option 是否该被选中,必须自己控制 selected 属性。
- 用
$.each(data, function(i, item) { ... })拼接<option value="...">...</option>字符串 - 第一个
option加上selected属性(注意不是selected="selected",单个selected即可) - 用
$('#mySelect').html(htmlStr)替换全部内容 - 紧接着执行
form.render('select')
done 回调里操作比 success 更可靠
如果用的是 layui.table 的异步加载,别在 AJAX 的 success 里处理 select;而应在表格配置的 done 回调中操作 —— 此时表格 DOM 已就绪,且避免因渲染时机错乱导致 form.render() 失效。
done: function(res, curr, count) { $('#mySelect').html(...); form.render('select'); }- 若 select 和 table 无关,只是独立组件,则在自己的 AJAX
success末尾加form.render('select') - 漏掉
form.render('select')是最常见错误,页面看起来没变化,但实际 DOM 里已插入,只是样式没更新
Vue 项目中混用 layui select 要额外注意 v-model 同步
如果 select 在 Vue 实例内,且绑定了 v-model,光靠 form.render() 不会更新 Vue 数据。必须手动赋值再触发渲染:
- 先设
vm.interval = data[0].value(假设 data 是选项数组) - 再
$('#mySelect').val(data[0].value).trigger('change') - 最后
form.render('select') - 否则 Vue 数据和 UI 状态会不一致,后续提交可能取到空值
select 默认行为不包含“自动选首项”,所有选中逻辑都得由你显式控制;最容易忽略的是:无论数据怎么塞进去,form.render('select') 这一步绝不能省,它才是让 layui 主动接管并高亮当前选中项的关键动作。


















