⼩程序简单选择下拉框提交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.,
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 (de != 200) {
wx.showModal({
showCancel: false,
title: '错误',
content: json.msg ? json.msg : "500",
})
return;
}
that.setData({
mainPhotoList: json.data
mainPhotoList: json.data
});
});
//调⽤的接⼝获取⽤户地址
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 (de != 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 (l == 0) {
wx.showToast({
title: '⼿机号为空',
icon: 'loading',
duration: 1500
})
return false;
} else if (l < 11) {
wx.showToast({
title: '⼿机号长度有误！',
icon: 'loading',
duration: 1500
})
return false;
} else if (!l)) {
wx.showToast({
title: '⼿机号有误！',
title: '⼿机号有误！',
icon: 'loading',
duration: 1500
})
return false;
} else {
wx.showToast({
title: '填写正确',
icon: 'success',
duration: 1500,
})
}
param.store_id = encodeURIComponent(json.id);
param.name = encodeURIComponent(json.name);
app.ajaxJson('/connectUs/reserveStore', param, function (res) {      var json = res.data;
if (de != 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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。