1# select
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **<select\>** component provides a drop-down list that allows users to select among multiple options.
8
9## Child Components
10
11The **[<option\>](js-components-basic-option.md)** child component is supported.
12
13
14## Attributes
15
16The [universal attributes](js-components-common-attributes.md) are supported.
17
18
19## Ad Asset
20
21In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
22
23| Name       | Type  | Mandatory| Description                                                        |
24| ----------- | ------ | ---- | ------------------------------------------------------------ |
25| font-family | string | No  | Font family, in which fonts are separated by commas (,). The first font in the family or the specified [custom font](./js-components-common-customizing-font.md) is used for the text.<br>Default value: **sans-serif**|
26
27
28## Events
29
30In addition to the [universal events](js-components-common-events.md), the following events are supported.
31
32| Name  | Parameter                     | Description                                                        |
33| ------ | ------------------------- | ------------------------------------------------------------ |
34| change | {newValue:&nbsp;newValue} | Triggered when an option is selected from the drop-down list to return an object. The value of **newValue** is the value of the selected option.|
35
36>  **NOTE**
37>
38>  The **\<select>** component does not support the **click** event.
39
40
41## Methods
42
43The [universal methods](js-components-common-methods.md) are supported.
44
45
46## Example
47
48```html
49<!-- xxx.hml -->
50<div class="container">
51    <select @change="onChange">
52        <option for="{{ array }}" value="{{ $item.value }}">
53            {{ $item.name }}
54        </option>
55    </select>
56</div>
57```
58
59```css
60/* xxx.css */
61.container {
62    display: flex;
63    justify-content: center;
64    align-items: center;
65    width: 100%;
66    height: 100%;
67}
68```
69
70```js
71// xxx.js
72export default {
73    data: {
74        array: [
75            {
76                "value": "Option 0", "name": "Option 0"
77            },
78            {
79                "value": "Option 1", "name": "Option 1"
80            },
81            {
82                "value": "Option 2", "name": "Option 2"
83            },
84            {
85                "value": "Option 3", "name": "Option 3"
86            },
87        ]
88    },
89    getData() {
90        let other = [
91            {
92                "value": "Option A", "name": "Option A"
93            },
94            {
95                "value": "Option B", "name": "Option B"
96            },
97            {
98                "value": "Option C", "name": "Option C"
99            },
100            {
101                "value": "Option D", "name": "Option D"
102            },
103        ]
104        return other
105    },
106    onChange() {
107        this.array = this.getData()
108    }
109}
110```
111
112![en-us_image_0000001152588538](figures/en-us_image_0000001152588538.gif)
113