layui select 清空需两步:先设原生值(单选用 val(''),多选用 val([])),再调 form.render('select') 强制同步 ui;带 lay-search 时需额外移除 .layui-this;清除图标点击不触发事件,须手动监听并触发 change。

layui select 清空后 UI 不变?必须调 form.render('select')
只执行 $('#mySelect').val('') 或 elem.value = '',DOM 值确实清了,但下拉标题文字、高亮项、面板状态全都不更新——Layui 把 UI 和原生 select 分离了,改 DOM 不等于重绘界面。
正确做法是两步缺一不可:
- 先设置原生值:
$('#mySelect').val('')(单选)或$('#myMultiSelect').val([])(多选,传空数组,不是空字符串) - 再强制同步 UI:
form.render('select'),注意form必须是已加载的模块实例,不能直接写layui.form.render()(未声明变量会报错)
如果页面有多个 select,form.render('select') 会全部重绘;Layui 没提供单个 select 的局部刷新接口。
带 lay-search 的 select 清空后自动“回弹”?要手动删 .layui-this
启用搜索的下拉框有个隐藏逻辑:当搜索框输入为空时,Layui 会悄悄恢复上次选中的项,导致你点完清除按钮,UI 又跳回旧值。
绕过它的唯一办法是三步操作:
$('#mySelect').val('')$('#mySelect').siblings('.layui-form-select').find('.layui-this').removeClass('layui-this').addClass('layui-hide')form.render('select')
注意:这串 DOM 操作必须在 form.render() 之后执行,否则 .layui-form-select 结构可能还没生成出来。
多选 select[multiple] 清不掉?别传 '',传 []
Layui 对原生多选支持很弱,$('#mySelect').val('') 完全无效——浏览器忽略,Layui 也不识别。它只认数组格式的值。
清空必须用:
-
$('#myMultiSelect').val([])✅ - 然后紧跟
form.render('select')
另外提醒:lay-search 和 multiple 组合是反模式,Layui 不渲染成带标签的多选 UI,视觉上仍是单选下拉。真要多选,得换 formSelects-v4 这类第三方组件。
想点 × 图标就联动清空其他字段?得监听 .layui-unselect
Layui 的清除图标(×)点击后只改 DOM 值,不触发 form.val(),也不广播 change 事件,所以级联下拉、校验、表格筛选都不会响应。
必须自己监听并接管:
- 用事件委托捕获点击:
$(document).on('click', '.layui-select-title .layui-unselect', ...) - 拿到对应
select的name和表单lay-filter - 调
form.val(filter, { [name]: '' })强制同步值 - 再
$select.trigger('change'),让联动逻辑能跑起来
如果涉及省市区三级联动,清空“市”时还得顺手清掉“区”的值,并对 #district 调一次 form.render('select'),否则它的选项列表还是旧的。











