微信小程序简单选择下拉框提交form表单

主要是通过设置全局的id从页面使用data-**来获取选中的值

使用e.target.dataset.value（对应的值）获得赋值给全局变量

然后赋给对应的input标签达到参数的传递

注：全局变量的值并不能直接获取使用

js页面

var app = getApp();
var store_id = ''
Page({

  /**
   * 页面的初始数据 
   */
  data: {
    indicatorDots: true,
    selectPerson: true,
    firstPerson: '请选择',//未点选时显示
    selectArea: false,
  },
  mySelect: function (e) {
    this.setData({
      firstPerson: e.target.dataset.me,
      store_id: e.target.dataset.value,
      selectPerson: true,
      selectArea: false,
    })
  },
  clickPerson: function () {
    var selectPerson = this.data.selectPerson;
    if (selectPerson == true) {
      this.setData({
        selectArea: true,
        selectPerson: false,
      })
    } else {
      this.setData({
        selectArea: false,
        selectPerson: true,
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    app.ajaxJson('/getMainPhoto', {}, function (res) {
      var json = res.data;
      if (json.code != 200) {
        wx.showModal({
          showCancel: false,
          title: '错误',
          content: json.msg ? json.msg : "500",
        })
        return;
      }
      that.setData({
        mainPhotoList: json.data
      });
    });
//调用微信的接口获取用户地址
 wx.getLocation({
      type: 'wgs84',
      success: function (resp) {
        latitude = resp.latitude
        longitude = resp.longitude
        aj(latitude, longitude);
      }
    });
    function aj(latitude, longitude) {
    app.ajaxJson('/store/list', { latitude: latitude, longitude: longitude }, function (res) {
      var json = res.data;
      if (json.code != 200) {
        wx.showModal({
          showCancel: false,
          title: '服务器错误',
          content: json.msg ? json.msg : "500",
        })
      }
      that.setData({
        stores: json.data,
      });
    });
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return {
      title: '',
      path: '/pages/welcome/welcome',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },
  formSubmit: function (e) {
    var that = this;
    var json = e.detail.value;
    var param = {};
    var myreg = /^(((13[0-9]{1})|(14[5|7])|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (json.tel == 0) {
      wx.showToast({
        title: '手机号为空',
        icon: 'loading',
        duration: 1500
      })
      return false;
    } else if (json.tel < 11) {
      wx.showToast({
        title: '手机号长度有误！',
        icon: 'loading',
        duration: 1500
      })
      return false;
    } else if (!myreg.test(json.tel)) {
      wx.showToast({
        title: '手机号有误！',
        icon: 'loading',
        duration: 1500
      })
      return false;
    } else {
      wx.showToast({
        title: '填写正确',
        icon: 'success',
        duration: 1500,
      })
      param.tel = json.tel
    } 
    param.store_id = encodeURIComponent(json.id);
    param.name = encodeURIComponent(json.name);
    param.message = encodeURIComponent(json.message + '位');
    param.product_date = encodeURIComponent(json.date);
    app.ajaxJson('/connectUs/reserveStore', param, function (res) {
      var json = res.data;
      if (json.code != 200) {
        wx.showModal({
          showCancel: false,
          title: '错误！！！',
          content: json.msg ? json.msg : "",
        })
        return;
      } else {
        wx.showToast({
          title: '已提交',
          icon: 'success',
          duration: 1000
        });
      }
    });
  }
})

wxml页面

<form bindsubmit='formSubmit'>
   <view class="phone_one" bindtap="clickPerson">
  <view class="phone_personal">{{firstPerson}}</view>
  <image src="" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>
  </view>
  <view class="text">
  <view class="person_box">
   <view class="phone_select" hidden="{{selectPerson}}">
    <block wx:for='{{stores}}' wx:for-item='store' wx:key=''>
    <view class="select_one" bindtap="mySelect"  data-value='{{store.id}}'data-me="{{store.store_name}}">{{store.store_name}}</view>
    </block>
  </view>
 </view>
    <input class="input" type="text" name='id' hidden='true' value='{{store_id}}' />
    <input class="input" type="text" name="name" placeholder="请输入姓名" />
    <input class="input" type="text" name="tel" placeholder="联系电话" />
    <input class="input" type="text" name="message" placeholder="消费人数" />
    <input class="input" type="text" name="date" placeholder="消费时间" />
    <button class='btn input' style='background-color:#022b46;' type="primary" form-type="submit">预约</button>
  </view>
</form>

wxss页面

.phone_personal{
  width: 100%;
  color:rgb(34, 154, 181);
  height:100rpx;
  line-height:100rpx;
  text-align: center;
}
.phone_one{
  display: flex;
  position: relative;
  justify-content: space-between;
  background-color:rgb(239, 239, 239);
  width:75%;
  height:100rpx;
  margin:0 auto;
  border-radius: 10rpx;
  border-bottom:2rpx solid rgb(255, 255, 255);
}
.person_box{
  position: relative;
}
.phone_select{
  margin-top:0;
  z-index: 100;
  position: absolute;
}
.select_one{
  text-align: center;
  background-color:rgb(239, 239, 239);
  width:590rpx;
  height:100rpx;
  line-height:100rpx;
  margin:0 13%;
  border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
  z-index: 100;
  position: absolute;
  right:2.5%;
  width: 34rpx;
  height: 20rpx;
  margin:40rpx 20rpx 40rpx 0;
  transition: All 0.4s ease; 
  -webkit-transition: All 0.4s ease;
}
.rotateRight{
  transform: rotate(180deg);
}