小程序多选框,同时获取ID 跟 NAME,因为把下拉多选框封装成自定义组件,所有就要同时获取到选中的ID 跟 NAME
官方中是这样的,如下图所示
上面官方中例子只带一个参数,我要同时获取两个参数,那么怎么才能带两个参数呢?可以像下面这样写
这样就可以同时获取到选中的ID跟NAME了
下面贴出代码:
wxml文件
<checkbox-group bindchange="checkboxChange">
<view class="item" wx:for="{{list}}" wx:key>
<checkbox value="{{item.id}},{{item.name}}" checked="{{item.isChecked}}"></checkbox>
<text class="overflow">{{item.name}}</text>
</view>
</checkbox-group>
js文件
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
id: "0001",
name: "张三"
},
{
id: "0002",
name: "李四"
},
{
id: "0003",
name: "王五"
}
]
},
/**
* 多选框值改变事件
*/
checkboxChange: function(e) {
var item = e.detail.value //选中的数组
var id = []; //选中的ID
var name = []; //选中的NAME
//循环选中的数组,取出对应的数据进行数组拼接
for (var i = 0; i < item.length; i++) {
var row = item[i].split(",") //将数组进行分割
id = id.concat(row[0]) //数组下表的第一个为id
name = name.concat(row[1]) //数组下表的第二个为name
}
console.log(id)
console.log(name)
}
})
wxss文件
.item {
line-height: 100rpx;
background-color: #eee;
border: 2rpx solid #fff;
}