layui下拉框怎么实现左右移动选择数据-Layui教程-PHP中文网

layui的select组件不支持左右移动选择，该功能由transfer组件实现；transfer基于双列表+按钮设计，需用transfer.render()初始化，数据格式为含value和title的数组，右侧选中状态自动维护。

layui下拉框怎么实现左右移动选择数据

layui 下拉框本身不支持左右移动选择数据

layui 的 select 组件是原生 <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 状态。极易出问题：

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

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

下载

移动端点击区域错位，select 原生唤起键盘或聚焦异常
表单提交时，只有真正 selected 的 option 会被提交，手动加 disabled 或移除 DOM 不等于“未选中”
layui 的 form.render('select') 无法识别你自定义的 DOM 结构，样式会脱节
无障碍访问（如屏幕阅读器）完全失效

真要这么做，核心逻辑是：
– 左侧列表渲染所有 option（不含 selected）
– 右侧列表只渲染当前 selected 的 option
– “添加”按钮：把左侧选中的 value 设为 select 中对应 option.selected = true
– “删除”按钮：把右侧选中的设为 false
– 必须配合 form.render('select') 强制重绘样式