表单组件Form提交之蛋疼的___picker普通选择器模式

picker### 相信大家都非常熟悉select下拉框，那么小程序对应的下拉框组件是谁呢，有请今天的主角：picker闪亮登场！

第一次在咱这论坛发帖，有点小紧张…

官方是这样描述picker的

普通选择器有自带三个必要属性：

1、range 主要指服务端返回的数据集（也可自定义数据），类型为Array。
2、value 主要指range数组的下标，类型为Number。
3、bindchange 主要指改变选项时触发的事件。其中event.detail.value可获取自身value的值。

普通选择器的自我表现：

1、由于range属性值为整个下拉选项的数据集及value为range的下标，所以要显示当前选项即：{{array[index]}}。
2、下拉选项弹层的样式为底部弹出，如下图。

该聊聊蛋疼的地方了：

picker通过form提交的时候，肯定提交的是自己的value，那么就相当于永远提交的是0、1、2、3、4、5…… 这样的话问题就来了，咱们要这些个0123有个毛用？例如服务端返回这样的数据：
show_arr = [ //定义假数据
{ “id” : “a6745” , “name”:”Bill” },
{ “id” : “b4433” , “name”:”George” },
{ “id” : “c5674” , “name”:”Thomas” },
{ “id” : “d5543” , “name”:”jack” },
{ “id” : “e7554” , “name”:”tim” }
];
这样每次选择名字之后，我想提交的是对应的id。例如选择jack那么我想传递d5543,这个是我们想要的，可是现在总给我们返回012345……这是什么鬼？？？

见证奇迹的时刻到了：

先上图：

html代码：

<block wx:for="{{show_arr}}">
    <text id="show">id:{{item.id}}===>name:{{item.name}}
</text>
</block>
<form bindsubmit="formSubmit">
    <picker name="selector" bindchange="bindPickerChange" value="{{picker_index}}" range="{{picker_arr}}">
        <button>请选择</button>
    </picker>
    <button class="selected">{{picker_arr[picker_index]}}</button>
    <button class="submit" formType="submit">form提交</button>
</form>
<button class="result">结果为：{{result}}</button>

css代码：

#show{
    text-align: center;
    font-size: 60rpx;
    display: block;
    color:#fff;
    background-color: green;
    padding:10rpx 0;
}
.selected{
    background-color: pink;
}
.submit{
    background-color: yellow;
}
.result{
    background-color: red;
}

js代码：

Page({
  data:{
    show_arr:[],//展示所有假数据
    picker_arr:[],//picker中range属性值
    picker_index:0,//picker中value属性值
    id_arr:[],//存储id数组
    result:''//form提交最终结果
  },
  onLoad:function(options){
    var picker_arr = [],
        id_arr     = [],
        show_arr = [  //定义假数据
          { "id" : "a6745" , "name":"Bill"   },  
          { "id" : "b4433" , "name":"George" },  
          { "id" : "c5674" , "name":"Thomas" },  
          { "id" : "d5543" , "name":"jack" },  
          { "id" : "e7554" , "name":"tim" }
        ];

    show_arr.forEach(function(e){
      picker_arr.push(e.name);
      id_arr.push(e.id);
    })
    this.setData({show_arr:show_arr,picker_arr:picker_arr,id_arr:id_arr});
  },
  bindPickerChange: function(e) {//选项改变触发事件
    this.setData({
      picker_index: e.detail.value
    })
  },
  formSubmit:function(e){//表单提交触发事件
    var result = this.data.id_arr[e.detail.value.selector];
    this.setData({result:result});
  }
})