layui穿梭框怎么清空已选中的数据

冬雪大大_8513

冬雪大大_8513

2026-09-25

276人浏览

原创

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

layui穿梭框怎么清空已选中的数据

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。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 若你用了自定义 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') 更稳妥

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui菜鸟教程 layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2320

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2153

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

60

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

20

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

20

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

20

12

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

2026.09.22

20

13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.5万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.7万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习