应使用自定义组件而非原生select：因iOS和Android对select渲染差异大，无法统一控制样式与交互；Bootstrap仅提供基础样式，需用div+ul+li构建弹层，配合JS实现滚动、搜索、分组等功能。
移动端城市选择器用 select 还是自定义组件？
直接用原生 <select></select> 在 iOS 和 Android 上体验差异极大：iOS 弹出的是系统滚轮（不可定制样式），Android 则可能显示下拉菜单或弹窗，且无法控制高度、搜索、分组等。所以真要做“外观可控+体验一致”的城市选择器，必须放弃原生 select，改用基于 div + ul + li 的自定义弹层，Bootstrap 仅提供栅格、间距、按钮等基础样式支持，不内置城市选择器组件。
用 Bootstrap 4/5 快速搭出可点击的触发按钮和弹层结构
核心是两部分：一个带下拉箭头的触发按钮（btn + dropdown-toggle），一个用 dropdown-menu 包裹的城市列表容器。注意不要用 data-bs-toggle="dropdown" 绑定原生下拉逻辑——它会干扰自定义滚动和搜索行为。
- 触发按钮写法：
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="citySelector">北京市</button> - 弹层容器用
position: absolute+z-index控制层级，不用dropdown-menu的默认 JS 行为，只借它的圆角、阴影、内边距样式 - 城市列表建议用
<ul class="list-group"></ul>，每项用<li class="list-group-item">，这样响应式缩放、触摸反馈、禁用态都自带
怎么让城市列表支持滚动、搜索和区域分组？
Bootstrap 不处理这些交互逻辑，得自己加 JS。关键点在于：滚动不能靠 overflow-y: auto 简单粗暴设高，否则在 iOS Safari 上会出现弹性拖拽后卡顿、滚动条消失等问题；搜索要防连续输入触发多次过滤；分组标题（如“华北”）需用 list-group-item disabled 样式避免被选中。
- 滚动容器高度建议固定为
200px左右，并加max-height: 200px; overflow-y: scroll;，再加-webkit-overflow-scrolling: touch;解决 iOS 滚动粘滞 - 搜索输入框放在弹层顶部，绑定
input事件，用debounce延迟 200ms 再执行过滤，避免卡顿 - 分组标题加
class="list-group-item disabled text-muted"，CSS 中显式设pointer-events: none;防误触 - 选中态用
active类，但别依赖 Bootstrap 默认的蓝色背景——移动端手指点击区域小，建议加大padding并加background-color: #f8f9fa;
为什么不能直接用 Bootstrap 的 form-select？
form-select 是对原生 select 的简单封装，只改了边框、圆角、字体等视觉细节，底层仍是系统控件。在移动端，它既无法阻止系统弹窗覆盖页面内容，也无法注入城市数据、监听滚动位置、高亮搜索关键词——所有这些都会失效。你看到的“外观”，其实是系统渲染的结果，不是你的 CSS 能控制的。
真正能落地的做法是：用 Bootstrap 的类名快速搭建结构和基础样式，把交互、数据、状态管理全交给 JS 控制。容易被忽略的是：iOS 上弹层必须加 transform: translateZ(0) 或 will-change: transform 才能触发硬件加速，否则滚动卡顿明显；另外，城市数据量大时（比如全国 300+ 地级市），别一次性渲染全部 DOM，得做虚拟滚动或懒加载。
