Ionic 选择器

Ionic select 组件为用户提供一个选择菜单，其中包含多个选项供用户选择。 Selects 是类似于原生 <select> 元素的表单控件。 当您点击 select 时，将立即出现一个对话框，其中包含所有选项。 select 菜单在不同平台上看起来会有所不同，因为它的样式由浏览器处理。 我们可以使用标准 <ion-select> 元素来访问 Ionic select。

select 组件始终与子 <ion-select-option> 元素一起使用。 如果 <ion-select-option> 没有 value 属性，则其文本将用作值。

如果 <ion-select> 组件已设置 value 属性，则将根据该 value 决定选定的选项。 另一方面，如果未设置 value，则将在 <ion-select-option> 上使用 select 属性。

select 组件使用接口 AtertController API 打开警报中的选项覆盖。 可以通过将 action-sheet 或 popover 传递给接口属性来更改它，以使用 ActionSheetController API 或 PopoverController API。

select 组件可以有两种类型

1. 单选
2. 多选

单选

默认情况下，select 允许您仅选择一个选项。 在此选择中，警报界面显示单选按钮样式的选项列表。 select 组件的值仅接收所选选项的值。

选择按钮

警报界面支持两个按钮，分别是：取消 和 确定。 可以使用 cancelText 和 okText 属性自定义按钮文本。

示例

以下示例有助于理解单选组件的用法。

输出

当您执行上述代码段时，它将给出以下输出。

如果您点击 select，将立即出现一个对话框，其中包含所有选项。 我们将获得以下输出。

多选

多选使用多个属性，允许您从一组选择选项中选择多个选项。 在此选择中，警报界面显示 复选框样式 的选项列表。 在这里，select 组件的值接收所有选定选项值的数组。

示例

输出

如果您点击 select，将立即出现一个对话框，其中包含所有选项。 现在，您可以根据需要选择多个选项。

界面选项

默认情况下，select 组件使用接口 AtertController API。 但是，我们也可以通过将 action-sheet 或 popover 传递给接口属性来更改它以使用 ActionSheetController API 或 PopoverController API。 以下示例更清楚地解释了这一点。

示例

Home.page.html

Home.page.ts

输出

当您执行上述 Ionic 应用程序时，它将给出以下输出。

现在，当您选择 popover 选项时，将出现以下屏幕。 在这里，您还可以检查其他选项，例如警报和操作表。