• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# select
2
3The **\<select>** component provides a drop-down list that allows users to select among multiple options.
4
5## Required Permissions
6
7None
8
9## Child Component
10
11The **\<[option](js-components-basic-option.md)>** child component is supported.
12
13## Attributes
14
15Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
16
17## Styles
18
19In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
20
21
22
23| Name        | Type   | Default Value | Mandatory | Description                                                  |
24| ----------- | ------ | ------------- | --------- | ------------------------------------------------------------ |
25| font-family | string | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. |
26
27## Events
28
29In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
30
31
32
33| Name   | Parameter            | Description                                                  |
34| ------ | -------------------- | ------------------------------------------------------------ |
35| change | {newValue: newValue} | Triggered after a value is selected from the drop-down list. The value of **newValue** is the attribute value of the child component **option**. |
36
37> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
38>
39> - The **\<select>** component does not support the **click** event.
40
41## Method
42
43Methods in [Universal Methods](js-components-common-methods.md) are supported.
44
45## Example Code
46
47```
48<!-- xxx.hml -->
49<div class="container">
50  <select @change="changeFruit">
51    <option value="bananaValue">
52      Banana
53    </option>
54    <option value="appleValue" selected="true">
55      Apple
56    </option>
57    <option value="pearValue">
58      Pear
59    </option>
60  </select>
61</div>
62/* xxx.css */
63.container {
64  display: flex;
65  justify-content: center;
66  align-items: center;
67}
68```
69
70![img](figures/en-us_image_0000001152588538.png)