微信小程序获取form表单中picker组件的选中的值

微信小程序获取form表单中picker组件的选中的值

• 最近在使用微信小程序form表单提交数据时，尝试通过设置id等一系列方法后，还是没办法将表单中的picker所选择的值一同提交。最后通过尝试在页面设置全局变量，终于可以在不同的方法中得到picker组件用户所选择的值。

• 本文重点介绍，在点击提交按钮后，怎样将表单中的picker所选择的值与form表单其他的内容一起提交，所以页面样式就直接略过。大家可以根据自己的喜好自行设置页面的样式。

• 先放一下图片吧

页面效果图：

• 选好后点击确定后的输出结果：
  
  点击提交按钮后的输出结果：
  
• 为了简单起见此处引用weUi的组件样式：

wxml代码：

<view>
  <form bindsubmit="add" report-submit>
    <view> 
      <view>商品名称</view>
      
          <view class="weui-cells weui-cells_after-title">
              <view class="weui-cell">
                  <view class="weui-cell__bd">
                      <input class="weui-input" name="goodsname" type="text" bindblur="isDigit" placeholder="请输入商品名称" />
                  </view>
              </view>
          </view>
    </view>
    <view>选择商品类别</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__bd">
                    <picker mode="selector" bindchange="bindCatePickerChange" value="{{cateIndex}}" range-key="cate" range="{{cateArray}}">
                        <view class="weui-select" >{{cateArray[cateIndex].cate}}</view>
                    </picker>
                </view>
            </view>
            
      </view>
       <button form-type="submit" type="primary">提交</button>
  </form>
</view>

js代码：

//此处声明的变量在文件中所有的方法*享
var cate=""; //用来保存picker组件选中的类别名称
var cateid="";//用来保存picker组件选中的类别id
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
    cateArray:[
      {id:'1', cate:'休闲零食'},{id:'2', cate:'面包糕点'},{id:'3',cate:'水饮冲调'},{id:'4', cate:'饮料酒水'},{id:'5',cate:'方便速食'},{id:'6', cate:'生活用品'}],
    cateIndex:0,
  },
   /**
   * 生命周期函数--监听页面加载
   */
   /*先对cate与cateid进行初始化picker组件的默认值，如果用户没有点击按钮选择类别时，才能将cate的值设置为组件中的默认值*/
  onLoad: function (options) {
    var cindex=this.data.cateIndex
    cate=this.data.cateArray[cindex].cate
    cateid=this.data.cateArray[cindex].id
  },
//当用户点击确定时，执行的事件
  bindCatePickerChange: function (e) {
    var cname=this.data.cateArray[e.detail.value].cate;
   
    var cid=this.data.cateArray[e.detail.value].id;
    cate=cname;
    cateid=cid
    console.log('cate:',cate)
    console.log('乔丹选的是', cname)
    //下面重新赋值必须有，页面显示的信息才会改为刚刚选中的值
    this.setData({
      cateIndex: e.detail.value,     
    }) 
  },
//当用户点击确定时执行的事件
  add: function (e) {
    var name = e.detail.value.goodsname;
    var catename=cate;
    console.log("商品名称："+name+"，商品类别："+catename)
  }
  })

以上方法是我的个人对于获取form表单中picker组件所选中的值的解决方案，如果你有不同的方案，欢迎留言，共同进步！