layui select 的 value="" 默认值设不上是因为其内部将空字符串视作“未选中”,需确保 html 中存在带引号的 、正确调用 form.val() 后立即执行 form.render('select'),且动态加载时须确认 dom 就绪与 layui 初始化完成。

layui select 的 value="" 默认值为什么设不上
因为 Layui 渲染时会跳过 value="" 的 <option></option>,哪怕你写了 <option value="" selected>全部</option>,调用 form.val() 或 jQuery .val('') 也大概率没反应——不是 JS 失效,是 Layui 内部匹配逻辑把空字符串当“未选中”处理了。
- HTML 中必须存在
<option value="">全部</option>,且不能漏掉引号(value=会被解析为空,但不可靠) -
form.val('myFilter', { 'status': '' })要求name="status"的<select></select>已存在且带lay-filter="myFilter" - 设完必须立刻跟
form.render('select', 'myFilter'),否则 UI 不更新 - 如果该 select 是动态插入的(比如 AJAX 加载后
.html()),要确保<option value=""></option>真的进了 DOM,再执行赋值 + render
form.val() + form.render() 顺序错了就白干
常见错误是先调 form.render('select'),再 form.val()——这等于告诉 Layui “按当前 DOM 状态重绘”,而此时原生 <select></select> 的 value 还是空或默认项,UI 自然不会变。
- 正确顺序:改 DOM(如有)→
form.val('filterName', { key: '' })→form.render('select', 'filterName') - 如果没写
lay-filter,form.render('select')会重绘所有 select,性能差且易干扰其他控件 - 多选场景下,空字符串不适用;要清空多选,得传空数组:
form.val('filterName', { tags: [] })
带 lay-search 的 select 清空后自动回填空值
启用搜索的 select(lay-search)有个隐藏行为:用户手动清空搜索框输入时,Layui 会尝试恢复上次选中的项。如果上次是 value="",它就会悄悄把你刚清掉的又“弹回来”。
- 点击清除按钮时,不能只设
.val(''),还要同步清理 UI 高亮:$('#mySelect').siblings('.layui-form-select').find('.layui-this').removeClass('layui-this').addClass('layui-hide') - 之后再调
form.render('select'),否则高亮残留 - 若不需要这个自动恢复逻辑,最彻底的办法是移除
lay-search属性,改用自定义搜索(比如监听 input 事件 + filter 数据)
动态加载后默认值失效,本质是 DOM 没就绪
AJAX 返回数据、拼接 <option></option> 并插入后,立刻 form.val() 却没效果?不是接口问题,是新 <option></option> 还没真正挂到 DOM 上,或者 form.render() 执行得太早。
- 确保
.html()或.append()完成后再操作,不要依赖success回调的时序(推荐用done或 Promise.then()) - 插入后检查浏览器 Elements 面板,确认
<option value=""></option>确实存在,且父<select></select>有lay-id属性(说明已被 Layui 初始化) - 如果
<select></select>是首次渲染,需先form.render('select', 'filter')让 Layui 接管,再form.val();否则form.val()找不到目标
undefined,也不是 null,更不是缺失,每一层都得对齐它的存在性和类型。











