HTML穿梭框是含双向列表与控制按钮的交互组件，支持批量移动、搜索过滤和状态保持；而select multiple仅为多选容器，无法实现拖拽、高亮、保序等操作。
什么是 HTML 穿梭框，它和 select 多选有啥区别
穿梭框（Transfer）不是原生 HTML 标签，而是由两个并列的列表 + 控制按钮组成的交互组件，核心价值在于「双向批量移动」+「搜索过滤」+「保持顺序/状态」。直接用 <select multiple></select> 无法实现左右拖拽、已选项目高亮、移动后保留原始排序等需求——它只是多选容器，不是数据流转界面。
常见错误是试图只靠 CSS + 原生 select 模拟穿梭框，结果卡在：无法监听“某项被移入右侧”的精确时机、不能动态更新按钮禁用状态、搜索时选项 DOM 与数据不同步。
用纯 JS 实现最简穿梭框的三个关键节点
不依赖框架也能做，但必须守住这三个逻辑点，否则交互会断：
- 左侧
<ul></ul>和右侧<ul></ul>的data-id必须与源数组元素的唯一标识（如id字段）严格对应，不能靠innerText匹配——中文、空格、换行都会导致错位 - “向右移动”按钮点击时，要先收集所有左侧
checked的<input type="checkbox">对应的data-id，再从源数组中过滤出这些项，**追加到右侧列表末尾**（不是插入到 DOM 顶部） - 每次移动后，必须重置两侧 checkbox 的
checked状态，并重新绑定事件——否则第二次点击可能仍触发第一次选中的项
示例片段（仅核心逻辑）：
立即学习“前端免费学习笔记（深入）”；
const moveRightBtn = document.getElementById('move-right');
moveRightBtn.addEventListener('click', () => {
const leftChecks = document.querySelectorAll('#left-list input:checked');
const ids = Array.from(leftChecks).map(cb => cb.closest('li').dataset.id);
const toMove = sourceData.filter(item => ids.includes(item.id));
// 追加到右侧列表（注意：不是 innerHTML +=）
toMove.forEach(item => {
const li = document.createElement('li');
li.dataset.id = item.id;
li.innerHTML = `<input type="checkbox"> ${item.label}`;
rightList.appendChild(li);
});
// 清空左侧勾选并从 sourceData 中移除
leftChecks.forEach(cb => cb.checked = false);
sourceData = sourceData.filter(item => !ids.includes(item.id));
});
Transfer 组件里搜索功能为什么总失效
搜索失效通常不是正则写错了，而是 DOM 显示与数据状态没对齐。典型表现：输入关键词后，左侧列表项隐藏了，但 checkbox 仍可点击；或者搜索后点“向右移动”，移过去的是未过滤前的全量数据。
根本原因是：搜索只是控制 display: none，但没同步修改 disabled 或移除 input 的事件绑定。正确做法是——
- 搜索时，遍历所有
li，根据其innerText或预存的data-keywords判断是否匹配，然后设置li.style.display = 'none'或'list-item' - 但 checkbox 本身不能被
disabled，否则无法响应点击；应该在移动逻辑里，只处理那些li.style.display !== 'none'的项 - 更稳妥的方式是维护一个
filteredData数组，每次搜索后重新渲染整个列表（用innerHTML = ''+ 循环生成），这样 DOM 和数据永远一致
Vue/React 里用第三方 Transfer 组件要注意什么
Ant Design 的 <transfer></transfer>、Element Plus 的 <el-transfer></el-transfer> 看似开箱即用，但实际集成时高频踩坑点很具体：
- Vue 版本升级到 3.x 后，
props.data必须是响应式数组（ref([])或computed），传普通数组会导致右侧列表不更新 - React 版本若用
useState管理targetKeys，每次移动后必须确保新数组是全新引用（setTargetKeys(prev => [...prev, ...newKeys])），否则key变化检测失败 - 所有组件都要求每项有唯一
key字段（非id），且该字段不能是数字 0 或空字符串——Ant Design 会静默忽略这类项，不报错也不渲染 - 自定义渲染（
render或children插槽）里如果用了onClick，必须阻止事件冒泡，否则会同时触发穿梭框自身的选中逻辑
最常被忽略的一点：穿梭框默认不校验数据合法性。比如右侧列表里存在左侧已删除的 id，组件不会报错，但后续调用 onChange 回调时，targetKeys 里会包含无效值——得自己在提交前用 sourceData.map(i => i.key) 过滤一遍。
