layui select刷新后值丢失需手动持久化:页面加载时从sessionStorage或localStorage读值→设原生select的value→再调用form.render('select');带lay-search的需额外清除.layui-this;多选须传存在option的数组;key名应加页面路径防冲突。

刷新页面后 select 值丢失,是因为 layui 不自动持久化 value
原生 <select> 的 value 在页面刷新后确实会重置为第一个 <option> 或空值,而 layui 渲染的 UI 层(如下拉面板标题、高亮项)完全依赖 DOM 的 value 和 selected 属性。它本身不读 localStorage、不记历史,刷新即归零。
必须手动存取 value,且在 form.render() 前完成赋值
核心逻辑是:页面加载时从存储中读值 → 写入原生 <select> 的 value → 再调用 form.render('select') 同步 UI。顺序不能错,否则 UI 不更新。
- 推荐用
sessionStorage(关页即清)或localStorage(长期保留),按需选 - 存值时机:在表单提交、选项变更后立即保存,例如:
form.on('select(myFilter)', function(data){ sessionStorage.setItem('mySelectValue', data.value); }); - 取值时机:DOM 就绪后、
form.render()之前,例如:var saved = sessionStorage.getItem('mySelectValue'); if(saved) $('#mySelect').val(saved); form.render('select'); - 注意:如果
select是动态插入(如 AJAX 加载表单),要确保$('#mySelect')已存在再操作,否则val()静默失败
带 lay-search 的 select 要额外清除 UI 高亮残留
启用搜索的下拉框有个隐藏行为:即使你已设 val('') 或新值,Layui 可能因内部搜索框监听逻辑,在渲染时“回填”旧高亮项。这不是 bug,是它的搜索恢复机制。
- 解决办法是在
form.render('select')前,手动清理 UI 层的选中态:$('#mySelect').siblings('.layui-form-select').find('.layui-this').removeClass('layui-this'); - 这行代码必须在
val()之后、form.render()之前执行,否则会被重绘覆盖 - 如果页面有多个带
lay-search的 select,建议加唯一 class 或lay-filter来精准定位
多选 select[multiple] 必须传数组,且要校验选项是否存在
多选下拉框恢复时,val() 接收的是字符串数组,但若某个 value 对应的 <option> 还没加载进来(比如异步加载选项),val(['a','b']) 会静默忽略不存在的项,只设成功部分。
- 务必确保所有待恢复的
option已插入 DOM,再执行val() - 可加一层校验:
var opts = $('#mySelect option').map(function(){ return this.value; }).get(); var validVals = savedArray.filter(v => opts.includes(v)); $('#mySelect').val(validVals); - 动态加载场景下,不要在
$.ajax.success里立刻val(),等append()完成后再操作,或用Promise.resolve().then(() => { ... })确保微任务队列清空
'mySelectValue',就会互相覆盖。建议结合页面路径或表单 ID 构造 key,例如 'userForm_grade_' + location.pathname。


















