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});
  }
})