微信小程序picker一级联动处理

效果如下

 

 

 

 

1、html

  <view class="box" style="display: flex;">
    <label class="label pl14"><text style="color: red;">*</text>来源渠道:</label>
    <picker class="input" data-id="source" data-index="sourceIndex" bindchange="bindSourcePickerChange" value="{{sourceIndex}}"
      range="{{sourceItem}}" range-key="name">
      <view class="picker">
        {{sourceItem[sourceIndex].name}}
      </view>
    </picker>
  </view>

2、js

Page({
  data: {

    sourceIndex: 0,
    sourceId: 0,
    source: '请选择',
    sourceItem: [
      {
        id: 0,
        name: '请选择'
      },
      {
        id: 145,
        name: '推荐加盟'
      },
      {
        id: 176,
        name: '老业主自建'
      },
      {
        id: 177,
        name: '老业主推荐'
      },
      {
        id: 178,
        name: '老业主二店'
      },
      {
        id: 181,
        name: '红星美凯龙'
      },
      {
        id: 185,
        name: '高登科技'
      },{
        id: 193,
        name: '加盟店改造升级'
      },{
        id: 194,
        name: '转让全托管店'
      },{
        id: 196,
        name: '竞品门店'
      },{
        id: 217,
        name: '法务代理机构'
      }
    ],
  },
  bindSourcePickerChange(e) {
    let [sourceLists, sourceIndex] = [this.data.sourceItem, 0]
    for(let i = 0; i < sourceLists.length; i++){
      let item = sourceLists[i]
      if(item.id === sourceLists[e.detail.value].id){
        sourceIndex = i
      }
    }
    this.setData({
      sourceIndex: sourceIndex,
      sourceId: sourceLists[e.detail.value].id,
      source: sourceLists[e.detail.value].name
    })
    console.log(this.data.sourceIndex);
    console.log(this.data.sourceId);
    console.log(this.data.source);
  },
})

3、