Layui的select组件不支持左右移动选择，该功能由transfer组件实现；transfer基于双列表+按钮设计，需用transfer.render()初始化，数据格式为含value和title的数组，右侧选中状态自动维护。
layui 下拉框本身不支持左右移动选择数据
layui 的 select 组件是原生 <select> 的美化封装，仅提供下拉展开、搜索过滤、禁用/选中等基础能力，**没有内置“双栏穿梭框”（即左右两个列表、通过按钮移动选项）功能**。如果你看到类似效果，实际用的是 layui 的另一个组件：transfer（穿梭框），不是下拉框。
要用左右移动选择，得换用 transfer 组件
layui 2.8+ 内置了 transfer，专为「从源列表选取并移动到目标列表」设计，符合你描述的“左右移动选择”场景。它不依赖 select，而是基于两个可滚动列表 + 控制按钮实现。
常见错误现象：
– 直接在 select 上写左右按钮，点击无响应或 DOM 错乱
– 试图用 form.on('select(...)') 监听穿梭动作，但该事件根本不会触发
- 必须用
transfer.render()初始化，不能靠 class 或 lay-filter 自动渲染 - 数据格式必须是数组，每个项含
value和title字段（title是显示文本） - 右侧目标列表选中状态由组件自动维护，无需手动操作
option.selected - 移动后需监听
transfer.on('change', ...)获取变更后的 value 数组
<div id="demoTransfer"></div>
<script>
layui.use('transfer', function(){
var transfer = layui.transfer;
transfer.render({
elem: '#demoTransfer',
data: [
{value: '1', title: 'Java'},
{value: '2', title: 'Python'},
{value: '3', title: 'Go'}
],
title: ['待选', '已选'],
value: ['2'], // 默认右侧已有 Python
onchange: function(value){
console.log('当前选中值：', value); // ['2']
}
});
});
</script>
如果非要“在下拉框里模拟左右移动”，只能自己造轮子
这不是推荐做法，但有少量旧项目因兼容性限制强行改造 select。本质是隐藏原生下拉框，用两个 div 模拟左右面板 + 按钮 + 手动同步 select 的 selected 状态。极易出问题：
- 移动端点击区域错位，
select原生唤起键盘或聚焦异常 - 表单提交时，只有真正
selected的option会被提交，手动加disabled或移除 DOM 不等于“未选中” - layui 的
form.render('select')无法识别你自定义的 DOM 结构，样式会脱节 - 无障碍访问（如屏幕阅读器）完全失效
真要这么做，核心逻辑是：
– 左侧列表渲染所有 option（不含 selected）
– 右侧列表只渲染当前 selected 的 option
– “添加”按钮：把左侧选中的 value 设为 select 中对应 option.selected = true
– “删除”按钮：把右侧选中的设为 false
– 必须配合 form.render('select') 强制重绘样式
注意 transfer 的几个易忽略点
很多人初始化后发现没反应，往往卡在这几处：
-
elem必须是空容器（如<div></div>），不能里面已有select或其他内容 - layui 版本低于 2.8 时没有
transfer，需升级或引入第三方（如layui-transfer独立插件） -
data数组若来自 Ajax，必须等请求返回后再调用transfer.render()，不能在空数组上提前渲染 - 如果页面有多个
transfer，每个elemID 必须唯一，且不能复用同一个 DOM 节点
左右移动这件事，layui 早就分清楚了：下拉框管单选/多选，穿梭框管双向搬运。硬凑在一起，反而让数据流向和 DOM 状态更难控制。
