layui穿梭框无内置清空api,需手动清除左右select中所有option的selected属性并调用form.render('select')同步ui与内部状态。

layui穿梭框没有内置清空API,必须手动操作左右两个select
穿梭框(transfer)组件本身不提供 clear 或 reset 方法,它的状态完全依赖左右两个 <select></select> 的 selected 属性。所谓“已选中”,就是右侧 select 里有 <option selected></option>;清空,就是把右侧所有 option 的 selected 移除,并确保左侧没被意外勾选。
常见错误是只清 DOM:$('#rightSelect').empty()——这会删掉整个选项列表,不是清空“已选中”,而是毁掉数据源。
- 正确做法:用 jQuery 遍历右侧
select的所有option,逐个移除selected属性 - 再调用
form.render('select'),让 layui 重绘下拉样式并同步内部状态 - 如果左侧
select也有部分项被selected(比如用户误点),一并清除,避免下次拖拽时异常
清空后必须调用 form.render('select') 同步UI
layui 的 transfer 是基于原生 select 封装的,它不监听原生 change,而是靠 form.render() 把 DOM 状态映射到内部缓存。不调这句,界面看起来没变,但 form.val('transferFilter') 仍返回旧值,提交表单时也会带上残留选项。
注意:form.render('select') 必须在清空操作之后立即执行,且不能省略参数 'select'——写成 form.render() 无效,它不会自动识别 transfer 内部的 select。
- 若你用了自定义
lay-filter,比如lay-filter="userTransfer",清空后仍只需form.render('select'),无需指定 filter - 不要用原生 JS 设置
select.selectedIndex = -1,这只能影响第一个 option,对多选无意义 - 别漏掉隐藏的
select:transfer 渲染后,左右两个 select 默认会被设为display: none,jQuery 仍能正常操作它们
如何获取左右 select 的 DOM 引用
transfer 初始化时没有返回实例,也无法通过 ID 直接查——因为 layui 会把原始 select 隐藏,并生成一套伪 DOM。唯一可靠的方式,是初始化前就给左右 select 加明确的 ID 或 class。
例如:
<select id="left-transfer" multiple lay-filter="transferDemo"><option value="1">Java</option> <option value="2">Python</option></select><select id="right-transfer" multiple lay-filter="transferDemo"><option value="3">Go</option></select>
- 清空右侧:
$('#right-transfer option').prop('selected', false) - 清空左侧(可选):
$('#left-transfer option').prop('selected', false) - 然后统一执行:
form.render('select') - 如果没加 ID,可用
$('select[lay-filter="transferDemo"]:last')定位右侧 select,但稳定性差,不推荐
配合表单重置时,记得同步清空关联变量
如果你在 JS 中维护了一个数组(如 selectedValues = ['3'])来记录穿梭框当前选中值,仅操作 DOM 不会自动更新它。清空 UI 后,这个变量还是旧值,后续提交或校验就会出错。
最易忽略的是:transfer 的值并不直接绑定到 form.val(),它只读取两个 select 的 selected 状态。所以清空后,form.val('transferFilter') 才会真正返回空数组。
- 安全做法:清空 DOM +
form.render('select')后,立刻执行form.val('transferFilter', {}),双重保险 - 若你用
transfer.render()动态初始化(非静态 HTML),需保存其返回的实例,但该实例也不含 clear 方法,仍要回到操作 select 的路径 - 移动端要注意:iOS Safari 下
prop('selected', false)有时不触发重绘,加一句$('#right-transfer').trigger('change')更稳妥











