| 参数 | 说明 | 类型 | 默认值 |
| size | 选择器尺寸 可选值: 'small', 'medium', 'large' |
Enum | 'medium' |
| value | 当前值，用于受控模式 | any | - |
| defaultValue | 初始的默认值 | any | - |
| placeholder | 没有值的时候的占位符 | String | - |
| state | 校验状态 可选值: 'error', 'loading' |
Enum | - |
| autoWidth | 下拉菜单是否与选择器对齐，如果需要下拉区域自动撑开，需要配置为false | Boolean | true |
| readOnly | 是否只读，只读模式下可以展开弹层但不能选 | Boolean | - |
| followTrigger | 是否跟随滚动 | Boolean | false |
| disabled | 是否禁用选择器 | Boolean | - |
| dataSource | 传入的数据源， const dataSource = [ {label:'option1', value:'option1'}, {label:'option2', value:'option2'}, {label:'disabled', disabled:true} ]; |
Array<Object/Boolean/Number/String> | - |
| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
Enum | 'single' |
| onChange | Select发生改变时触发的回调 参数: event event.detail.value:选中的值 |
Function | - |
| 参数 | 说明 | 类型 | 默认值 |
| label | 设置分组的文案 | ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| value | 选项值 | any | - |
| disabled | 是否禁用 | Boolean | - |
<view>
<view class="com-title">基础选择器</view>
<select onChange="onChange" onBlur="onBlur" onToggleHighlightItem="onToggleHighlightItem" defaultValue="jack" showSearch hasClear>
<option value="jack">Jack</option>
<option value="frank">Frank</option>
<option value="hugo">Hugo</option>
</select>
<view class="com-title">标签</view>
<select aria-label="tag mode" mode="tag" onChange="handleChange" dataSource="{{dataSource}}" style="width: 300" />
<view class="com-title">多选</view>
<select class="custom-select-1" mode="multiple" onChange="handleChange" dataSource="{{dataSource}}" style="width: 200" />
<select class="custom-select-1" hasSelectAll mode="multiple" onChange="handleChange" dataSource="{{dataSource}}" style="width: 200" />
<select class="custom-select-1" hasSelectAll value="{{value}}" mode="multiple" onChange="handleChange1" dataSource="{{dataSource}}" style="width: 200" />
<view class="com-title">级联选择</view>
<view class="demo-container">
<select class="custom-select-1" placeholder="Select Province" dataSource="{{provinceData}}" value="{{province}}" onChange="handleProvinceChange" />
<select class="custom-select-1" placeholder="Select City" dataSource="{{data}}" value="{{city}}" onChange="handleCityChange" disabled="{{disabled}}" />
</view>
<view class="com-title">分组</view>
<view class="demo-container">
<select class="custom-select-1" placeholder="OptionGroup">
<option-group label="group1">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</option-group>
<option-group label="group2">
<option value="small2">Small2</option>
<option value="medium2">Medium2</option>
<option value="large2">Large2</option>
</option-group>
</select>
<select class="custom-select-1" placeholder="optgroup">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option-group label="Pets Group">
<option value="cat">Cat</option>
<option value="rabbit">Rabbit</option>
<option value="dog" disabled>Dog</option>
</option-group>
</select>
<select class="custom-select-1" placeholder="item.children" dataSource="{{dataSource1}}"/>
</view>
</view>
