這種東西在專案中是很常見的，文件上有的demo我這裡就不在重複一遍了，我現在說的是從後臺拿到的資料，放在這個選擇器裡。

後臺返回的格式是這樣的：

我們要實現的樣子是這樣的：

其實跟文件上介紹的普通選擇器差不多，只是多了幾個條件值，

我們一起來看一下程式碼：主要看標紅的這幾個條件

<view class='regPhone f' >
            <image src='../../images/regConTeam-Icon.png' class='regCon-Icon regSelect-Icon'></image>
            <view class="row-wrap">
                <picker bindchange="bindCasPickerChange" range="{{casArray}}" value='{{casArray[casIndex].Id}}'
 
 class='regSelect' range-key="{{'Name'}}" >
                     <input class='selectInp' placeholder-class='{{place}}' placeholder='請選擇團隊' name='casArry' disabled='false' value='{{casArray[casIndex].Name}}'/> 
                </picker>
            </view>
            <image src='../../images/select-icon.png' class='select-icon'></image>
        </view>
 
value='{{casArray[casIndex].Id}}' class='regSelect' range-key="{{'Name'}}" >
                     <input class='selectInp' placeholder-class='{{place}}' placeholder='請選擇團隊' name='casArry' disabled='false' value='{{casArray[casIndex].Name}}'/> 
                </picker>
            </view>
            <image src='../../images/select-icon.png' class='select-icon'></image>
        </view>

  /* 下拉框函式 */
  bindCasPickerChange: function (e) {
    console.log('喬丹選的是', this.data.casArray[e.detail.value].Name)
    console.log('喬丹選的是', this.data.casArray[e.detail.value].Id)
    this.setData({
      teamname: this.data.casArray[e.detail.value].Name,
      teamid: this.data.casArray[e.detail.value].Id
    })
    if (e.detail.value == 4) {
      this.setData({ reply: true })
    } else {
      this.setData({ reply: false })
    }
    this.setData({
      casIndex: e.detail.value
    })
  },

.regSelect-Icon{
  float: left;
}
.row-wrap{
  width: 80%;
  height: 100%;
  float: left;
  margin-left: 20rpx; 
  
}
.regSelect{
  font-size: 28rpx;
  position: relative;
  padding-top: 18rpx;
  height: 100%;
}
.selectInp{
  width:100%;
  font-size: 28rpx;
  position: absolute;
}
.section{
   font-size:28rpx;
   margin-left: 50rpx;
   margin-top: 30rpx;
}
.f{
  position: relative;
}
.select-icon{
  position: absolute;
  width: 30rpx;
  height: 14rpx;
  right: 40rpx;
  top: 50%;
  margin-top: -7rpx;
}
.on{display: block}
.off{display: none}
.regConBtm{
  color: #11b3c2;
  font-size: 26rpx;
  text-align: right;
  margin-top: 20rpx;
  padding-right: 20rpx;
}

想要獲得更多資料的  請微信搜尋公眾號 【熱血科技】，關注一下即可。