微信小程序实现select二级下拉

本文实例为大家分享了微信小程序实现select二级下拉的具体代码，供大家参考，具体内容如下

xiala.wxml

    3.请选择门店
    
        
            
                
                
            
            
               
                {{item.name}}
            
            
                {{item}}
             
            
            
        
    

js页面

// pages/xiala/xiala.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    liebiao:[],
    price:[],
    index:0,
    area:[],
    areaId:'',
    dian:[]
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that = this;
   that.area();
   
  },
// 获取区域
area(){
  var that = this;
    wx.request({
      url: 'xxxxxx',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
        let area = res.data.data;
        let obMut = [];
        let areaId;
        for(var i=0; i {
    if (idx === item.id) {
      item.status = true
      wx.request({
        url: 'xxxxxxx',
        dataType: 'json',
        method: 'POST',
        header: {
         'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          aid: item.id
        },
        success(res) {
          // console.log(res)
          let fmutA = that.data.fmutA;
          if (res.data.status === 1) {
          console.log(res.data.shop)
          
          let dian = res.data.shop;
          let fDian = [];
          
          for(var i=0; i 
 

wxss页面

/* 列表 */
/* pages/map/map.wxss */
.select_box{
  width: 63%;
  height:70%;
  border-radius: 14rpx;
  position: relative;
}
.select_box .select{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
}
.select_box .select .select_text{
  color: #777777;
  line-height: 28rpx;
  flex: 1;
}
.select_box .select .select_img{
  width: 20rpx;
  height: 20rpx;
  display: block;
  transition:transform 0.3s;
  position: absolute;
  right: 25rpx;
}
.select_box .select .select_img_rotate{
  transform:rotate(180deg); 
}
.select_box .option_box{
position: absolute;
top: calc(100% - 1px);
width: 100%;
box-sizing: border-box;
height: 0;
overflow-y: auto;
background: #fff;
transition: height 0.3s;
border: 1px solid #efefef;
border-right: 1px solid #efefef;
background: #fcfcfc;
}
.select_box .option_box .option{
  display: block;
  line-height: 38rpx; 
  font-size: 9pt;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
}
.option_bbox{
    display: flex;
    justify-content: row;
}
.select_box .option_box {
    position: relative;
}

界面比较原始，建议自行美化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。