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