编程语言
首页 > 编程语言> > 小程序 级联 picker

小程序 级联 picker

作者:互联网

 1 微信小程序 级联 pick,选择某乡镇 直接列出该乡镇的所有村
2 <picker bindchange="bindPickerChange1" mode="multiSelector" bindcolumnchange="bindcolumnchange" value="{{index}}" 3 range="{{xz}}"> 4 <picker-column> 5 <picker-view> <input value="{{xz[index][multiIndex[0]]}}" type="text" /> 6 <input value="{{xz[index][multiIndex[1]]}}" type="text" /> 7 </picker-view> 8 </picker-column> 9 </picker> 10 11 // pcity/pcity.js 12 var that 13 var list = [] 14 Page({ 15 16 /** 17 * 页面的初始数据 18 */ 19 data: { 20 multiIndex: [], 21 multiArray: [ 22 ['突泉镇', '六户镇', "杜尔基镇", "水泉镇", "永安镇", "宝石镇", "学田乡", "太平乡", "九龙乡"], 23 ['东方红村', '东镇村'] 24 ], 25 26 objectMultiArray: [{ 27 28 "Town": "突泉镇", 29 "Country": "东方红村" 30 31 }, 32 { 33 34 "Town": "突泉镇", 35 "Country": "东镇村", 36 37 }, { 38 39 "Town": "六户镇", 40 "Country": "六户村" 41 42 } 43 44 45 ], 46 47 }, 48 onl oad: function () { 49 var that = this; 50 51 wx.request({ 52 url: 'https://jb.tq.gov.cn/Town_country/getData', 53 success: function (res) { 54 55 that.setData({ 56 objectMultiArray: res.data 57 }); 58 } 59 }) 60 }, 61 bindMultiPickerChange: function (e) { 62 this.setData({ 63 "multiIndex[0]": e.detail.value[0], 64 "multiIndex[1]": e.detail.value[1] 65 }); 66 }, 67 bindMultiPickerColumnChange: function (e) { 68 var that = this; 69 var xz = this.data.multiArray[0][e.detail.value] //记录当前选中的乡镇 70 switch (e.detail.column) { 71 case 0: 72 list = [] 73 for (var i = 0; i < that.data.objectMultiArray.length; i++) { 74 if (xz == that.data.objectMultiArray[i].Town) { 75 list.push(that.data.objectMultiArray[i].Country) 76 } 77 } 78 that.setData({ 79 "multiArray[1]": list, 80 "multiIndex[0]": e.detail.value, 81 "multiIndex[1]": 0 82 }) 83 84 } 85 } 86 87 })

 

标签:picker,Town,级联,程序,detail,multiIndex,var,data,objectMultiArray
来源: https://www.cnblogs.com/sunzzhankui/p/15359763.html