直接用 multiple + onchange 无法实现多条件联动，因为 multiple 仅控制多选行为，不提供筛选逻辑；真正的级联筛选需用 JS 动态约束可选项范围，核心是构建数据映射表、交集过滤、重建选项并处理 disabled 边界。
为什么直接用 multiple + onchange 无法实现多条件联动
因为 multiple 属性本身只控制选择行为（Ctrl/Shift 多选），它不提供任何筛选逻辑或数据映射能力。你监听 onchange 只能拿到一个值数组，但无法自动推导“选了 A 和 B 之后，C 列哪些选项还有效”。浏览器原生
如何用 JavaScript 实现真正的级联筛选逻辑
核心不是“更新下拉内容”，而是“动态约束可选项范围”。关键步骤如下：
- 预先构建完整数据映射表，例如：
const dataMap = [{name: 'Alice', dept: 'HR', role: 'Manager'}, ...] - 为每个
- 用
filter()对dataMap做交集筛选：只有同时满足所有已选条件的记录才保留 - 遍历剩余记录，提取各列唯一值，重写对应
- 对当前未被操作的下拉框，禁用（
disabled）那些在筛选结果中不再出现的option
常见坑：disabled 选项仍能被 JS 读取到 value
很多人以为加了 disabled 就等于“不存在”，但 select.value 仍可能返回已被禁用项的值，尤其当用户手动修改 DOM 或页面重载后状态残留。正确做法是：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每次筛选前，先清空所有下拉框的
selectedIndex = -1 - 重写
option时，不复用旧节点，而是全部重建 - 读取选中值时，用
Array.from(select.selectedOptions).map(o => o.value)，它天然跳过disabled项 - 提交表单前，再做一次校验：检查每个
select的当前值是否仍在本次筛选结果的合法值集合内
性能敏感场景下避免重绘抖动
当表格行数超 500 条、联动列超 4 个时，频繁 innerHTML = '' + newOptions 会明显卡顿。更稳的方式是：
立即学习“前端免费学习笔记（深入）”；
- 用
DocumentFragment批量创建option节点，最后一次性appendChild - 对未变化的列，跳过重写逻辑——比如只对比新旧值数组的
Set差异 - 把
filter()过程缓存中间结果，例如filteredByDept→filteredByDeptAndRole，避免重复遍历全量数据 - 用
requestIdleCallback包裹非紧急的 DOM 更新，防止阻塞主线程
联动筛选真正难的不是写几行 JS，而是想清楚“谁驱动谁”和“边界怎么收”。比如用户清空某个下拉框时，其他列该恢复全部选项，还是保持上一次有效交集？这个策略必须在数据结构设计阶段就定死，否则后期补逻辑会越来越绕。
