1# select<a name="ZH-CN_TOPIC_0000001164130768"></a> 2 3下拉选择按钮，可让用户在多个选项之间选择。 4 5## 权限列表<a name="zh-cn_topic_0000001173164719_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001173164719_section9288143101012"></a> 10 11支持<[option](js-components-basic-option.md)\>。 12 13## 属性<a name="zh-cn_topic_0000001173164719_section2907183951110"></a> 14 15支持[通用属性](js-components-common-attributes.md)。 16 17## 样式<a name="zh-cn_topic_0000001173164719_section648514244510"></a> 18 19除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 20 21<a name="zh-cn_topic_0000001173164719_table2017217206553"></a> 22<table><thead align="left"><tr id="zh-cn_topic_0000001173164719_row17172152010556"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164719_p1117215208557"><a name="zh-cn_topic_0000001173164719_p1117215208557"></a><a name="zh-cn_topic_0000001173164719_p1117215208557"></a>名称</p> 23</th> 24<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164719_p11172120175513"><a name="zh-cn_topic_0000001173164719_p11172120175513"></a><a name="zh-cn_topic_0000001173164719_p11172120175513"></a>类型</p> 25</th> 26<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164719_p21721420155517"><a name="zh-cn_topic_0000001173164719_p21721420155517"></a><a name="zh-cn_topic_0000001173164719_p21721420155517"></a>默认值</p> 27</th> 28<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164719_p917211203552"><a name="zh-cn_topic_0000001173164719_p917211203552"></a><a name="zh-cn_topic_0000001173164719_p917211203552"></a>必填</p> 29</th> 30<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164719_p101721020175516"><a name="zh-cn_topic_0000001173164719_p101721020175516"></a><a name="zh-cn_topic_0000001173164719_p101721020175516"></a>描述</p> 31</th> 32</tr> 33</thead> 34<tbody><tr id="zh-cn_topic_0000001173164719_row1917292016550"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164719_p9172162095516"><a name="zh-cn_topic_0000001173164719_p9172162095516"></a><a name="zh-cn_topic_0000001173164719_p9172162095516"></a>font-family</p> 35</td> 36<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164719_p181721120165512"><a name="zh-cn_topic_0000001173164719_p181721120165512"></a><a name="zh-cn_topic_0000001173164719_p181721120165512"></a>string</p> 37</td> 38<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164719_p1117282018556"><a name="zh-cn_topic_0000001173164719_p1117282018556"></a><a name="zh-cn_topic_0000001173164719_p1117282018556"></a>sans-serif</p> 39</td> 40<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164719_p517218202558"><a name="zh-cn_topic_0000001173164719_p517218202558"></a><a name="zh-cn_topic_0000001173164719_p517218202558"></a>否</p> 41</td> 42<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164719_p17172120195510"><a name="zh-cn_topic_0000001173164719_p17172120195510"></a><a name="zh-cn_topic_0000001173164719_p17172120195510"></a>字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过<a href="js-components-common-customizing-font.md">自定义字体</a>指定的字体，会被选中作为文本的字体。</p> 43</td> 44</tr> 45</tbody> 46</table> 47 48## 事件<a name="zh-cn_topic_0000001173164719_section3892191911214"></a> 49 50除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 51 52<a name="zh-cn_topic_0000001173164719_table836435619510"></a> 53<table><thead align="left"><tr id="zh-cn_topic_0000001173164719_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164719_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001173164719_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001173164719_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 54</th> 55<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164719_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001173164719_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001173164719_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 56</th> 57<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164719_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001173164719_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001173164719_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 58</th> 59</tr> 60</thead> 61<tbody><tr id="zh-cn_topic_0000001173164719_row166321742154511"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164719_p169871843194513"><a name="zh-cn_topic_0000001173164719_p169871843194513"></a><a name="zh-cn_topic_0000001173164719_p169871843194513"></a>change</p> 62</td> 63<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164719_p19988164384513"><a name="zh-cn_topic_0000001173164719_p19988164384513"></a><a name="zh-cn_topic_0000001173164719_p19988164384513"></a>{newValue: newValue}</p> 64</td> 65<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164719_p298824384514"><a name="zh-cn_topic_0000001173164719_p298824384514"></a><a name="zh-cn_topic_0000001173164719_p298824384514"></a>下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。</p> 66</td> 67</tr> 68</tbody> 69</table> 70 71> **说明：** 72>- select组件不支持click事件。 73 74## 方法<a name="zh-cn_topic_0000001173164719_section2279124532420"></a> 75 76支持[通用方法](js-components-common-methods.md)。 77 78## 示例<a name="zh-cn_topic_0000001173164719_section18261242145416"></a> 79 80``` 81<!-- xxx.hml --> 82<div class="container"> 83 <select @change="changeFruit"> 84 <option value="bananaValue"> 85 Banana 86 </option> 87 <option value="appleValue" selected="true"> 88 Apple 89 </option> 90 <option value="pearValue"> 91 Pear 92 </option> 93 </select> 94</div> 95``` 96 97``` 98/* xxx.css */ 99.container { 100 display: flex; 101 justify-content: center; 102 align-items: center; 103} 104``` 105 106 107 108
