# Select 下拉选择

从多个选项中选择一个或多个。

## 基本用法

<!-- <Half> -->

### 单选

可通过 `appearance` 设置下拉按钮外观。

[Example: Select](./_example/SelectExample.jsx)

### 多选

- 通过 `allOption` 设置全选选项
- 通过 `staging` 控制是否直接触发改变
- 通过 `button` 自定义按钮内容

[Example: MultiSelect](./_example/MultiSelectExample.jsx)

<!-- </Half> -->

## 虚拟滚动

<!-- <Half> -->

### 单选

单选下拉列表默认启用了虚拟滚动，可设置 `virtual` 禁用：

- 开启后下拉列表宽度无法自适应宽度，可设置 `listWidth` 或 `matchButtonWidth` 控制宽度
- 禁用后下拉列表默认自适应宽度，但仍可通过宽度属性控制

[Example: SelectWidth](./_example/SelectWidthExample.jsx)

### 多选

多选下拉列表默认未启用了虚拟滚动，可设置 `virtual` 启用。

多选表现行为与单选一致，同样可设置 `listWidth` 或 `matchButtonWidth` 控制宽度。

[Example: MultiSelectWidth](./_example/MultiSelectWidthExample.jsx)


<!-- </Half> -->

## 更多示例

<!-- <Half> -->

### 分组

下拉选择支持分组。

（`2.4.0` 版本新增特性：在不传递 `groups` 时使用分割线分组）

[Example: GroupSelect](./_example/GroupSelectExample.jsx)

### 可搜索

[Example: SelectSearch](./_example/SelectSearchExample.jsx)

### 可清空

[Example: SelectClearable](./_example/SelectClearableExample.jsx)

### 下拉列表高度

使用 `listHeight` 属性控制高度。

[Example: SelectHeight](./_example/SelectHeightExample.jsx)

### 列表底部内容

使用 `footer` 设置下拉列表底部内容。

[Example: SelectFooter](./_example/SelectFooterExample.jsx)

### 刷新

点击刷新按钮以获取最新 `options`。

[Example: SelectRefresh](./_example/SelectRefreshExample.jsx)

### 加载更多

[Example: SelectLoadMore](./_example/SelectLoadMoreExample.jsx)

### 动态加载

[Example: SelectDynamic](./_example/SelectDynamicExample.jsx)

<!-- </Half> -->

## 相关组件

<!-- <Half> -->

### 标签选择

详见 [TagSelect](/component/tagselect) 组件。

[Example: TagSelect](../tagselect/_example/TagSelectExample.jsx)

### 自动补全

详见 [AutoComplete](/component/autocomplete) 组件。

[Example: TagSelect](../autocomplete/_example/AutoCompleteBasicExample.jsx)

<!-- </Half> -->

## 组件属性

[Interface: SelectProps](./SelectProps.tsx)

[Interface: SelectMultipleProps](./SelectProps.tsx)