1# select
2
3下拉选择按钮，可使用下拉菜单展示并选择内容。
4
5>  **说明：**
6>
7>  从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12支持<[option](js-components-basic-option.md)>。
13
14
15## 属性
16
17支持[通用属性](js-components-common-attributes.md)。
18
19
20## 样式
21
22除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：
23
24| 名称        | 类型   | 必填 | 描述                                                         |
25| ----------- | ------ | ---- | ------------------------------------------------------------ |
26| font-family | string | 否   | 字体样式列表，用逗号分隔。列表中第一个系统中存在的字体样式或者通过[自定义字体](./js-components-common-customizing-font.md)指定的字体样式，会被选中作为当前文本的字体样式。<br/>默认值：sans-serif |
27
28
29## 事件
30
31除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
32
33| 名称   | 参数                      | 描述                                                         |
34| ------ | ------------------------- | ------------------------------------------------------------ |
35| change | {newValue:&nbsp;newValue} | 选择下拉选项后触发该事件，返回值为一个对象，其中newValue为选中项option的value值。 |
36
37>  **说明：**
38>
39>  select组件不支持click事件。
40
41
42## 方法
43
44支持[通用方法](js-components-common-methods.md)。
45
46
47## 示例
48
49```html
50<!-- xxx.hml -->
51<div class="container">
52    <select @change="onChange">
53        <option for="{{ array }}" value="{{ $item.value }}">
54            {{ $item.name }}
55        </option>
56    </select>
57</div>
58```
59
60```css
61/* xxx.css */
62.container {
63    display: flex;
64    justify-content: center;
65    align-items: center;
66    width: 100%;
67    height: 100%;
68}
69```
70
71```js
72// xxx.js
73export default {
74    data: {
75        array: [
76            {
77                "value": "下拉选项0", "name": "选项0"
78            },
79            {
80                "value": "下拉选项1", "name": "选项1"
81            },
82            {
83                "value": "下拉选项2", "name": "选项2"
84            },
85            {
86                "value": "下拉选项3", "name": "选项3"
87            },
88        ]
89    },
90    getData() {
91        let other = [
92            {
93                "value": "下拉选项a", "name": "选项a"
94            },
95            {
96                "value": "下拉选项b", "name": "选项b"
97            },
98            {
99                "value": "下拉选项c", "name": "选项c"
100            },
101            {
102                "value": "下拉选项d", "name": "选项d"
103            },
104        ]
105        return other
106    },
107    onChange() {
108        this.array = this.getData()
109    }
110}
111```
112
113![zh-cn_image_0000001152588538](figures/zh-cn_image_0000001152588538.gif)