小程序 级联 picker

本文主要是介绍小程序 级联 picker，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 1 微信小程序 级联 pick，选择某乡镇 直接列出该乡镇的所有村
<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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！