清空layui select必须两步:先$('#myselect').val('')设原生值,再form.render('select')同步ui;多选需传[];带lay-search要额外移除.layui-this;级联需用form.val()同步内部状态。

只改 val('') 不生效,必须调用 form.render('select')
直接写 $('#mySelect').val('') 确实清掉了原生 select 的值,但 Layui 渲染出的标题文字、高亮项、下拉面板都还卡在旧状态——因为 UI 和 DOM 是分离的。不触发重绘,用户看到的永远是“假清空”。
正确做法是两步缺一不可:
- 先设置原生值:
$('#mySelect').val('') - 再强制同步 UI:
form.render('select')(注意:form必须是已加载的模块实例,不能直接写layui.form.render('select'))
常见错误:漏掉 layui.use('form', function(){...}) 包裹,导致 form 未定义;或写了 form.render() 却没传参数,Layui 不知道要重绘哪类组件。
带 lay-search 的 select 清空后自动回填?手动清除 .layui-this
启用搜索的下拉框有个隐藏逻辑:当搜索框输入为空时,Layui 会悄悄恢复上次选中的项,导致你点完清除按钮,值又弹回来了。
绕过它的办法是三连操作:
- 清空原生值:
$('#mySelect').val('') - 干掉 UI 高亮:
$('#mySelect').siblings('.layui-form-select').find('.layui-this').removeClass('layui-this').addClass('layui-hide') - 最后刷新:
form.render('select')
注意:这一步必须在 form.render() 之后执行,否则 .layui-form-select 结构可能还没生成,查不到目标元素。
多选 select[multiple] 清空必须传 [],不是 ''
原生多选框的值是数组,$('#myMulti').val('') 浏览器直接忽略,Layui 也识别不了。你看到没变化,其实是根本没清掉。
正确写法只有一种:
-
$('#myMulti').val([])—— 传空数组 - 再跟上
form.render('select')
补充提醒:Layui 官方对 multiple + lay-search 组合支持极差,UI 会退化成单选样式。真要多选+搜索,建议换 formSelects 这类第三方插件。
级联下拉清空要配合 form.val(),否则联动中断
比如省市区三级联动,只清空“市”的 val,但没调 form.val() 同步到模块内部状态,后续“区”的下拉就不会自动置空或禁用——因为 form.on('select(city)') 根本没被触发。
实操要点:
- 清第一个字段:
form.val('searchFilter', { 'city': '' }) - 清关联字段:
form.val('searchFilter', { 'district': '' }) - 统一刷新:
form.render('select')
关键细节:form.val() 第一个参数必须和表单的 lay-filter="searchFilter" 严格一致,拼错就白写了。
最易忽略的一点:所有清空操作都得在 form.render() 之后补上 UI 刷新,哪怕你已经调了 form.val() —— 因为后者只改内部缓存,不更新界面。











