微信小程序---下拉框

wxml:

html 复制代码

<view class="container">
  <picker style="margin-left: 20rpx;" class="picker" bindchange="bindAccountChangeCL" range-key="plateNumber" value="{{plateIndexC}}" range="{{plateindEX}}">
    <view style="float: left;line-height: 75rpx;{{plateIndexC == 0?'color:#ccc;':''}}" class="weui-input">
      {{plateindEX[plateIndexC].plateNumber}}
    </view>
  </picker>
</view>

js:

javascript 复制代码

Page({
  data: {
    res: {
      data: [
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        },
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        },
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        },
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        }
      ]
    },
    plateindEX: [],
    plateIndexC: 0
  },
  onLoad: function() {
    this.initVehicleList();
  },
  initVehicleList: function() {
    // 从res.data中提取车辆数据并映射id
    const vehicleData = this.data.res.data.map(item => ({
      id: item.vehicleId,
      plateNumber: item.plateNumber
    }));
    
    let vehicleList = [{ id: "0", plateNumber: "选择车辆" }];
    if (vehicleData && vehicleData.length > 0) {
      vehicleList = [...vehicleList, ...vehicleData];
    }
    
    // 更新数据到页面
    this.setData({
      plateindEX: vehicleList,
      plateIndexC: 0 
    });
  },
  bindAccountChangeCL: function(e) {
    console.log('车辆picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      plateIndexC: e.detail.value
    })
    
    // 获取选中的车辆ID
    const selectedId = this.data.plateindEX[e.detail.value].id;
    if(selectedId !== "0") {
      // 执行选中车辆后的逻辑
      console.log('选中的车辆ID:', selectedId);
    }
  }
})