微信小程序下拉框之二维数组或对象

在项目中，我们大多数时候传的值并不是需要这个下标，而是其他的值。像我项目中，需要获取到的是它对应的Id,那么我们如何通过它的这个下标值返回你想要的值呢？

通过picker返回的索引值，去获取匹配你想获取的值;

js文件

Page({
    data:{
     //户型   这是一个本地的对象，然后绑定到页面上
    pic_array: [
      { id: 13, name: ‘1室1厅1卫‘ },
      { id: 14, name: ‘1室2厅1卫‘ },
      { id: 15, name: ‘2室1厅1卫‘ },
      { id: 16, name: ‘3室1厅2卫‘ },
      { id: 17, name: ‘4室1厅2卫‘ },
      { id: 18, name: ‘5室1厅3卫‘ },
      { id: 19, name: ‘6室1厅3卫‘ },
      { id: 20, name: ‘7室以上‘ },
    ]，
     hx_index: 0；
   }， 
     bindPickerChange_hx: function (e) {
     console.log(‘picker发送选择改变，索引为‘, e.detail.value);
     this.setData({   //给变量赋值

　　　　var id = this.data.pic_array[e.detail.value].id //根据索引去查对应的id

     hx_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致
    })
     console.log(‘id为:‘, id);
    },
})

wxml

      <picker name="picker_hx" class="cybm_pic_1" data-id="{{pic_array[hx_index].id}}" range="{{pic_array}}" range-key="{{‘name‘}}"  bindchange="bindPickerChange_hx"  >
        <view class="picker" >
         户型:  {{pic_array[hx_index].name}} //指定数组中指定下标的name键对应的值 
        view>
      picker>

属性名range  类型Array/Object Array  存放你的本地数据数组或者对象数组，需要加载的数据

属性名range-key  类型String  当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

属性名value  类型Array  value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）

属性名data-  类型自定义属性后更的属性名字可以自定义 当你需要设置其他值得时候可以使用  可选

转载于:https://www.cnblogs.com/zxf100/p/10037609.html