小程序模板网

picker提交表单的值原来可以这么简单粗暴

发布时间:2018-04-16 10:47 所属栏目:小程序开发教程

新手刚学编程不久,然后遇到了picker组件的坑,都知道picker通过form提交的时候是提交它的下标,然而,我们提交到服务器的要下标并没什么卵用,上网查了一轮都没找到具体说法,有的说是数组写成[{id:0,name:xxx},{id:1,name:xxx}]之类形式,然后根据下标对应id去拿到name提交服务器,看得我糊里糊涂,后来试了一轮,终于找到最简单直接的方法。

首先,假设data中有这么一个数组

 

				
  1. data: {
  2.  
  3. MusicN: 0,
  4.  
  5. Music: ['钢琴','小提琴','吉他','声乐','其他','未决定' ]
  6.  

wxml是这样

 

				
  1. <form bindsubmit="formSubmit">
  2.  
  3. <picker name="instrument" bindchange="bindPickerMusic" value="{{MusicN}}" range="{{Music}}">{{Music[MusicN]}}</picker>
  4.  
  5. <button type="primary" formType="submit"> 提交 </button>
  6.  
  7. </form >

两个组件绑定的函数

 

				
  1. // Picker改变选项的时候
  2.  
  3. bindPickerMusic: function (e) {
  4.  
  5. console.log('picker发送选择改变,携带值为', e.detail.value)
  6.  
  7. this.setData({
  8.  
  9. MusicN: e.detail.value
  10.  
  11. })
  12.  
  13. },
  14.  
  15.  
  16.  
  17. //form提交表单
  18.  
  19. formSubmit: function (e) {
  20.  
  21. console.log('picker的携带值为' + e.detail.value.instrument)
  22.  
  23. //e.detail.value.instrument是picker提交的下标,直接写在数组后面的中括号里,得到数组中对应的值
  24.  
  25. var ins = this.data.Music[e.detail.value.instrument]
  26.  
  27. console.log('输出的是' + ins)

输出结果:  捕获.JPG

之后就可以开心愉快地提交给服务器的小伙伴们了



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23453.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询