原生HTML无法直接实现穿梭框，需用两个select+按钮配合JS实现基础左右移动：监听选中项、用appendChild移动option、手动维护selected状态，关键在行为正确而非样式相似。
怎么用 select + option 实现基础穿梭框（非树形）
纯 HTML 本身不支持“穿梭框”这种交互组件，更不支持树形结构。所谓“HTML 做穿梭框树形”，本质是用 HTML 提供容器和选项元素（select、div、ul 等），靠 JavaScript 控制数据流转和展开/折叠逻辑。
如果你直接写两个 select 标签并加按钮，只能做扁平列表的左右搬运；一旦要支持父子节点、折叠状态、复选联动（比如勾选父节点自动选中所有子节点），就必须引入 JS 管理树形数据结构和 DOM 渲染。
- 别指望只靠
form或optgroup实现树形 ——optgroup只能分组，不能嵌套，也不支持点击展开 - 真实项目中，
select很快会卡在样式限制和事件劫持困难上，多数人转用div+ul/li模拟 - 浏览器原生
select不支持多级缩进、图标、复选框，所以“树形穿梭框”几乎 100% 是自定义渲染
为什么 zTree 或 Ant Design Tree 是更现实的选择
手写一个带穿梭功能的树组件，要处理：节点展开/收起状态、父子选中联动、拖拽排序、搜索过滤、左右区域数据同步、键盘导航……这些不是“加几行 JS”能搞定的。
成熟方案省掉大量边界问题：
立即学习“前端免费学习笔记（深入）”；
-
zTree的setting.check.enable = true+setting.check.chkStyle = "checkbox"开启复选，再配合getCheckedNodes(true)获取所有已选节点，就能把左边树的选中结果批量塞进右边容器 -
Ant Design的Tree组件配合Transfer组件，用titles和render属性定制树形项，比从零搭 DOM 快 5 倍以上 - Vue 用户用
el-tree的check-strictly控制联动逻辑，React 用户用rc-tree的onCheck回调捕获变化，都比手动遍历 DOM 节点可靠
input type="checkbox" 怎么绑定树形数据而不乱套
树形结构里每个 input[type="checkbox"] 必须有唯一标识，且父子关系不能只靠 DOM 层级推断 —— 页面重排、动态加载、虚拟滚动都会让 DOM 层级失效。
正确做法是：每个节点带 id 和 parentId 字段，用 JS 维护映射关系：
const treeData = [
{ id: "1", title: "前端", parentId: null },
{ id: "2", title: "Vue", parentId: "1" },
{ id: "3", title: "Pinia", parentId: "2" }
];
- 渲染时给每个
input加data-id="2"，点击后通过data-id查找节点对象，再递归更新子节点的checked状态 - 千万别用
querySelectorAll("li ul li input")这类依赖 DOM 结构的选择器做联动 —— 一旦加了懒加载或折叠，就漏节点 - 如果右边“已选区”也要支持树形展示，注意去重：同一子节点可能被多个父节点选中，但右边只应出现一次
穿梭操作后，怎么保持树节点的展开/选中状态不丢失
用户在左树展开“React → Hooks → useEffect”，勾选它，再点“移入右侧”，接着又点“移回左侧”——此时希望它还是展开且已勾选的。这要求状态管理必须脱离 DOM，独立持久化。
- 把
expandedKeys、checkedKeys、halfCheckedKeys存在组件 state 或全局 store 里，每次重新渲染树前先恢复 - 右侧面板如果是独立
Tree，不要复用左树的 same data object —— 否则修改右树会意外影响左树，得用JSON.parse(JSON.stringify())或structuredClone()深拷贝 - 移动端要注意：iOS Safari 对
click事件有 300ms 延迟，用touchend替代，否则穿梭按钮响应发闷
