直接修改 size 属性不会触发下拉展开，它仅改变控件静态渲染形态；模拟点击展开应调用 click() 方法，需确保元素已挂载、未禁用且页面可见。
直接修改 size 属性不会触发下拉展开
HTML <select></select> 的 size 属性控制的是可见选项行数，设为 1 时表现为单选下拉框，大于 1 时则显示为多行列表（即“下拉”消失、“列表”常驻）。它和用户点击后弹出下拉面板是两套机制：size 是静态渲染控制，而点击展开依赖浏览器原生的 focus + click 行为或 open 状态（但该状态不可直接 JS 控制）。
所以，单纯执行 select.size = 1 或 select.setAttribute('size', '1')，哪怕之前是 size="5"，也不会模拟出“点击后下拉弹出”的视觉效果——它只是切换了控件形态。
想模拟点击展开？click() 是最可靠方式
对 <select size="1"></select> 元素调用 .click()，绝大多数现代浏览器（Chrome、Firefox、Edge、Safari）都会触发原生下拉展开行为，效果等同于用户鼠标点击。
- 必须确保元素已挂载到 DOM 且未被
disabled或display: none - 不能在
document.hidden为true时调用（如页面后台 tab），否则无效 - 移动端 Safari 对
click()触发下拉支持不稳定，部分版本需额外focus()配合 - 示例：
const select = document.getElementById('mySelect');<br>select.focus(); // 可选，提升兼容性<br>select.click();
size 动态改值的真正适用场景
动态修改 size 适合需要在“紧凑下拉”和“展开列表”两种 UI 模式间切换的场景，比如响应式设计中：小屏用 size="1"，大屏用 size="4"；或辅助功能开关（高对比度模式下强制展开所有选项）。
- 修改后会立即重绘，无需
re-render或框架干预 - 注意：若原
<select></select>有multiple属性，size改变会影响多选操作体验（例如size="1"时无法看到已选项） - IE11 及更早版本对
size动态变更后焦点/滚动位置处理异常，建议避开或降级处理 - 不要指望它替代
click()实现“展开动画”——它没有过渡，也不触发下拉浮层
为什么没有 select.open = true？
HTML 标准从未定义 <select></select> 的 open 属性或对应 API。这和 <details></details> 不同，后者有标准的 open 属性和 toggleAttribute('open')。浏览器厂商也未通过扩展提供类似能力（Chrome 曾有内部实验 API 但已废弃）。
这意味着：任何试图用 JS “打开下拉浮层”的需求，最终都只能退回到模拟用户交互（click() / focus()），或放弃原生 <select></select>、改用自定义下拉组件（如基于 <div> + <code>aria-expanded 实现）。
这个限制至今没变，不是你代码写错了，是平台能力就是如此。
