应放弃原生select，改用自定义下拉组件、移出DOM挂载到body或改用datalist方案，并处理键盘导航、无障碍支持及模态关闭时浮层销毁。
下拉列表在模态窗口中被截断怎么办
模态窗口（modal）通常有固定高度或 max-height + overflow: hidden，而原生 <select></select> 下拉列表会突破父容器边界、不受 overflow 限制——这是浏览器原生行为，不是 bug。结果就是：下拉箭头能点开，但选项列表被模态框裁掉，用户看不见可选内容。
为什么不能直接用 overflow: visible 修复
给模态框容器设 overflow: visible 无效，因为：
– <select></select> 的下拉面板是脱离当前 stacking context 渲染的（尤其在 Chrome/Firefox 中）；
– 即使父级 z-index 很高，下拉项仍可能被遮挡或出现在错误位置；
– 某些移动端 WebView（如 iOS Safari）会强制将下拉渲染到视口顶层，但位置偏移不可控。
真正可用的三种适配方式
必须放弃依赖原生 <select></select> 的下拉展开行为：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用自定义下拉组件（如基于
<div> + <code><ul></ul>实现），配合position: absolute和动态计算top/bottom，确保始终在视口内展开； - 把
<select></select>移出模态框 DOM 结构（例如挂载到document.body），再用 CSS 定位到触发元素下方，同时监听blur或点击外部关闭； - 对窄/高模态框，改用
<datalist></datalist>配合<input list>，它不弹“下拉面板”，而是内联提示，天然规避裁剪问题。
容易被忽略的关键细节
自定义下拉必须处理：
– 键盘导航（Tab、ArrowUp/ArrowDown、Enter）；
– 屏幕阅读器支持（role="listbox"、aria-expanded、aria-activedescendant）；
– 模态框关闭时同步销毁下拉浮层，否则残留 DOM 可能导致内存泄漏或焦点丢失；
– 在 @media (max-width: 768px) 下优先转为全屏选择器（select 原生行为在移动端反而更可靠）。
立即学习“前端免费学习笔记（深入）”；
