picker### 相信大家都非常熟悉select下拉框，那么小程序?qū)?yīng)的下拉框組件是誰(shuí)呢，有請(qǐng)今天的主角：picker閃亮登場(chǎng)！

第一次在咱這論壇發(fā)帖，有點(diǎn)小緊張…

官方是這樣描述picker的

普通選擇器有自帶三個(gè)必要屬性：

1、range 主要指服務(wù)端返回的數(shù)據(jù)集（也可自定義數(shù)據(jù)），類型為Array。
2、value 主要指range數(shù)組的下標(biāo)，類型為Number。
3、bindchange 主要指改變選項(xiàng)時(shí)觸發(fā)的事件。其中event.detail.value可獲取自身value的值。

普通選擇器的自我表現(xiàn)：

1、由于range屬性值為整個(gè)下拉選項(xiàng)的數(shù)據(jù)集及value為range的下標(biāo)，所以要顯示當(dāng)前選項(xiàng)即：{{array[index]}}。
2、下拉選項(xiàng)彈層的樣式為底部彈出，如下圖。

該聊聊蛋疼的地方了：

picker通過(guò)form提交的時(shí)候，肯定提交的是自己的value，那么就相當(dāng)于永遠(yuǎn)提交的是0、1、2、3、4、5…… 這樣的話問(wèn)題就來(lái)了，咱們要這些個(gè)0123有個(gè)毛用？例如服務(wù)端返回這樣的數(shù)據(jù)：
show_arr = [ //定義假數(shù)據(jù)
{ “id” : “a6745” , “name”:”Bill” },
{ “id” : “b4433” , “name”:”George” },
{ “id” : “c5674” , “name”:”Thomas” },
{ “id” : “d5543” , “name”:”jack” },
{ “id” : “e7554” , “name”:”tim” }
];
這樣每次選擇名字之后，我想提交的是對(duì)應(yīng)的id。例如選擇jack那么我想傳遞d5543,這個(gè)是我們想要的，可是現(xiàn)在總給我們返回012345……這是什么鬼？？？

見證奇跡的時(shí)刻到了：

先上圖：

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>請(qǐng)選擇</button>
    </picker>
    <button class="selected">{{picker_arr[picker_index]}}</button>
    <button class="submit" formType="submit">form提交</button>
</form>
<button class="result">結(jié)果為：{{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:[],//展示所有假數(shù)據(jù)
    picker_arr:[],//picker中range屬性值
    picker_index:0,//picker中value屬性值
    id_arr:[],//存儲(chǔ)id數(shù)組
    result:''//form提交最終結(jié)果
  },
  onLoad:function(options){
    var picker_arr = [],
        id_arr     = [],
        show_arr = [  //定義假數(shù)據(jù)
          { "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) {//選項(xiàng)改變觸發(fā)事件
    this.setData({
      picker_index: e.detail.value
    })
  },
  formSubmit:function(e){//表單提交觸發(fā)事件
    var result = this.data.id_arr[e.detail.value.selector];
    this.setData({result:result});
  }
})