微信小程序select多选
时间: 2024-10-13 12:01:23 浏览: 32
微信小程序中的`<select>`组件用于创建一个多选列表,用户可以选择其中的一项或多项。它有以下几个关键属性:
1. `value`:默认值,可以是一个数组,存储选中的选项值,每个选项有自己的`value`属性。
2. `multiple`:布尔值,默认为`false`,设置为`true`表示该`select`支持多选。
3. `options`:包含多个`option`标签,每个`option`都有`value`、`label`属性,分别对应选项的值和显示文本。
使用示例:
```html
<select multiple bindchange="bindSelectChange">
<view wx:for="{{options}}">
<option value="{{item.value}}" {{ item.value in selectedValues ? 'selected' : '' }}>
{{item.label}}
</option>
</view>
</select>
<script>
Page({
data: {
options: [
{value: 'opt1', label: '选项一'},
{value: 'opt2', label: '选项二'},
// 更多选项...
],
selectedValues: [] // 存储当前选择的值
},
bindSelectChange(e) {
this.setData({
selectedValues: e.detail.value // 更新选中的值
});
}
})
</script>
```
在这个例子中,当用户更改了`select`的选择,`bindSelectChange`函数会被触发,更新`selectedValues`的数据。
阅读全文