在微信小程序中，当用户用到下拉选择菜单时，我们经常使用picker，不过picker有一个小问题，就是获取当前选中的值是数组的索引，同时令某一行选中，也是通过索引号传递实现的。目前我们经常使用的是数据库中的id来保存数据。所以需要在这里将微信picker组件中的value(数组索引号）换成我们真实数据中的id才好。
如下图我们表中“工种”这个数组，其实是包含id和title属性的。如果用户切换选择时，微信picker传递过来的是当前项在数组中的索引号，这里我们需要通过索引号查询到此元素的id也就是：this.data.workArr[e.detail.value].id这个代码实现。
然后为了保持当前项被选中，我们传递给picker的value仍然需要是索引号，所以我们定义了一个字段workInx来保存每次变化后的索引号：
在changeWork方法保存workInx 为当前索引的值。在xml布局文件中value="{{ workInx }}"代码实现对当前索引号位置的选中。
一、定义data数据
data: {
//用于picker展示的数据数组
workArr: [{
"id": 1,
"title": "电工"
},{
"id": 2,
"title": "瓦工"
}, {
"id": 3,
"title": "油工"
}
],
workId:0,//真实id（当前选择的工种id,用于传递到后台）
workInx:0//picker当前选中的索引位置
},
//picker切换选择的处理方法
changeWork: function (e) {
console.log(e);
this.setData({
' workId ': this.data.workArr[e.detail.value].id,
'workInx': e.detail.value
})
},
前端xml
<view class="centerPage-info-item">
<label>工种</label>
<label class="ico-moon icon-rightarrow"></label>
<picker mode="selector" class="centerPage" bindchange="changeWork" value="{{ workInx }}" range="{{ workArr }}" range-key="title">
<view class="picker">{{ workArr[workInx].title }}</view>
</picker>
</view>
