ionic select

Ionic Select（选择框）组件中文超级详细讲解

（适用于 Ionic 7 / 8，Angular、React、Vue 通用）

<ion-select> 是 Ionic 中最常用的下拉选择组件，外观比原生 <select> 好看太多，支持单选、多选、搜索、弹出式界面、动作面板（Action Sheet）等多种样式。

1. 最基础的单选示例

<ion-item>
  <ion-label position="floating">选择城市</ion-label>
  <ion-select placeholder="请选择城市" [(ngModel)]="city">
    <ion-select-option value="beijing">北京</ion-select-option>
    <ion-select-option value="shanghai">上海</ion-select-option>
    <ion-select-option value="guangzhou">广州</ion-select-option>
    <ion-select-option value="shenzhen">深圳</ion-select-option>
  </ion-select>
</ion-item>

<p>你选择了：{{ city }}</p>

2. 常用属性全表（中英对照）

属性	类型	说明	常用值 / 示例
placeholder	string	未选择时的提示文字	“请选择”
multiple	boolean	是否多选	multiple=”true”
interface	string	弹窗样式（重点！）	“alert”（默认）、”popover”、”action-sheet”
interfaceOptions	any	自定义弹窗标题、按钮等	见下方示例
value	any	当前选中值（单选一个值，多选是数组）	value=”shanghai”
[(ngModel)] / v-model	any	双向绑定
cancelText	string	取消按钮文字	cancelText=”取消”
okText	string	确定按钮文字	okText=”确定”
disabled	boolean	是否禁用	disabled=”true”
compareWith	function	当选项是对象时，用于比较相等	见下方复杂对象示例

3. 三种界面样式对比（强烈推荐根据场景选）

样式	说明	适合场景	示例代码
alert（默认）	类似 iOS 原生选择器，带滚动	选项少于 15 个	默认即可
action-sheet	底部弹起按钮列表（Android 风格）	选项少、想更快点击	interface=”action-sheet”
popover	从输入框弹出下拉菜单（PC 友好）	Web 端、选项很多时	interface=”popover”

<!-- 推荐：少量选项用 action-sheet -->
<ion-select interface="action-sheet" placeholder="性别">
  <ion-select-option value="male">男</ion-select-option>
  <ion-select-option value="female">女</ion-select-option>
</ion-select>

<!-- 推荐：大量选项用 popover（桌面端） -->
<ion-select interface="popover" placeholder="选择国家">
  <!-- 几十个国家 -->
</ion-select>

4. 多选（multiple）完整示例

<ion-item>
  <ion-label>兴趣爱好（可多选）</ion-label>
  <ion-select multiple="true" [(ngModel)]="hobbies">
    <ion-select-option value="travel">旅游</ion-select-option>
    <ion-select-option value="food">美食</ion-select-option>
    <ion-select-option value="game">游戏</ion-select-option>
    <ion-select-option value="music">音乐</ion-select-option>
  </ion-select>
</ion-item>

<p>已选：{{ hobbies | json }}</p>

hobbies: string[] = ['travel', 'music'];  // 默认选中

5. 选项是对象（常见于接口数据）

cities = [
  { id: 1, name: '北京', code: 'BJ' },
  { id: 2, name: '上海', code: 'SH' },
  { id: 3, name: '杭州', code: 'HZ' }
];

selectedCity: any;

<ion-select [(ngModel)]="selectedCity" 
            [compareWith]="compareWithFn">
  <ion-select-option *ngFor="let c of cities" [value]="c">
    {{ c.name }}
  </ion-select-option>
</ion-select>

compareWithFn(item1: any, item2: any) {
  return item1 && item2 ? item1.id === item2.id : item1 === item2;
}

6. 自定义弹窗标题、按钮文字（interfaceOptions）

<ion-select 
  interface="alert"
  placeholder="选择出生年份"
  [interfaceOptions]="customAlertOptions">
  <ion-select-option *ngFor="let year of years" [value]="year">
    {{ year }}年
  </ion-select-option>
</ion-select>

customAlertOptions = {
  header: '出生年份',
  subHeader: '请选择您的出生年',
  message: '只能选择 18 岁以上',
  translucent: true
};

7. 监听值变化事件

<ion-select (ionChange)="onSelectChange($event)">

onSelectChange(event: any) {
  console.log('选中值：', event.detail.value);
}

8. 推荐组合（最佳用户体验）

<!-- 手机端少量选项（<8个） -->
<ion-select interface="action-sheet" cancelText="取消" okText="确定">

<!-- 手机端大量选项或需要搜索 -->
<ion-select interface="alert" [interfaceOptions]="{ header: '选择城市' }">

<!-- 桌面端或平板 -->
<ion-select interface="popover">

官方文档（中文）

https://ionicframework.com/docs/api/select

小彩蛋

• iOS 上自动变成滚轮选择器，超漂亮
• Android 上自动变成底部弹窗
• 完全支持暗黑模式
• 支持键盘操作和无障碍阅读

需要我给你一个「带搜索功能的超长列表 Select」完整示例吗？（用 ion-searchbar + ion-list 实现，超级实用！）
直接说你要 Angular / React / Vue 哪个框架的代码～