小程序 二級聯動 區--街道

WXML

<view class="section">
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
    </view>
  </picker>
</view>

JS

// pcity/pcity.js
var that
var list = []
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    multiIndex: [],
    multiArray: [
      ['福田區', '羅湖區', "南山區", "鹽田", "龍崗區", "寶安區", "光明新區", "龍華新區", "坪山新區"],
      ['園嶺', '南園', '華富', '蓮花', '福田', '沙頭', '香蜜灣', '福保', '華強北', '梅林']
    ],
    objectMultiArray: [{
        "regid": "2",
        "parid": "1",
        "regname": "福田區",
        "regtype": "1",
        "ageid": "0"
      },
      {
        "regid": "3",
        "parid": "1",
        "regname": "羅湖區",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "4",
        "parid": "1",
        "regname": "南山區",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "5",
        "parid": "1",
        "regname": "鹽田",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "6",
        "parid": "1",
        "regname": "龍崗區",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "7",
        "parid": "1",
        "regname": "寶安區",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "8",
        "parid": "1",
        "regname": "光明新區",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "9",
        "parid": "1",
        "regname": "龍華新區",
        "regtype": "1",
        "ageid": "0"
      }, {
        "regid": "10",
        "parid": "1",
        "regname": "坪山新區",
        "regtype": "1",
        "ageid": "0"
      },

      {
        "regid": "36",
        "parid": "3",
        "regname": "黃貝",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "37",
        "parid": "3",
        "regname": "東門",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "38",
        "parid": "3",
        "regname": "南湖",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "39",
        "parid": "3",
        "regname": "桂園",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "40",
        "parid": "3",
        "regname": "筍崗",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "41",
        "parid": "3",
        "regname": "清水河",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "42",
        "parid": "3",
        "regname": "翠竹",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "43",
        "parid": "3",
        "regname": "東湖",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "44",
        "parid": "3",
        "regname": "東曉",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "45",
        "parid": "3",
        "regname": "蓮塘",
        "regtype": "2",
        "ageid": "0"
      },


      {
        "regid": "53",
        "parid": "4",
        "regname": "南頭",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "54",
        "parid": "4",
        "regname": "南山",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "55",
        "parid": "4",
        "regname": "招商",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "56",
        "parid": "4",
        "regname": "蛇口",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "57",
        "parid": "4",
        "regname": "粵海",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "58",
        "parid": "4",
        "regname": "沙河",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "59",
        "parid": "4",
        "regname": "西麗",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "60",
        "parid": "4",
        "regname": "桃源",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "62",
        "parid": "5",
        "regname": "沙頭角",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "63",
        "parid": "5",
        "regname": "梅沙",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "64",
        "parid": "5",
        "regname": "鹽田",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "65",
        "parid": "5",
        "regname": "海山",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "76",
        "parid": "6",
        "regname": "布吉",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "77",
        "parid": "6",
        "regname": "坂田",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "78",
        "parid": "6",
        "regname": "南灣",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "79",
        "parid": "6",
        "regname": "平湖",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "80",
        "parid": "6",
        "regname": "龍崗",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "81",
        "parid": "6",
        "regname": "橫崗",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "82",
        "parid": "6",
        "regname": "龍城",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "83",
        "parid": "6",
        "regname": "坪地",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "84",
        "parid": "6",
        "regname": "坑梓",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "97",
        "parid": "7",
        "regname": "新安",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "98",
        "parid": "7",
        "regname": "西鄉",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "99",
        "parid": "7",
        "regname": "福永",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "100",
        "parid": "7",
        "regname": "沙井",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "101",
        "parid": "7",
        "regname": "石岩",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "102",
        "parid": "7",
        "regname": "松崗",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "112",
        "parid": "8",
        "regname": "公明",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "113",
        "parid": "8",
        "regname": "光明",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "120",
        "parid": "9",
        "regname": "龍華",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "121",
        "parid": "9",
        "regname": "觀瀾",
        "regtype": "2",
        "ageid": "0"
      }, {
        "regid": "397",
        "parid": "10",
        "regname": "坪山",
        "regtype": "2",
        "ageid": "0"
      }
    ]
  },
  onLoad: function() {
    that = this
  },
  bindMultiPickerChange: function(e) {
    that.setData({
      "multiIndex[0]": e.detail.value[0],
      "multiIndex[1]": e.detail.value[1]
    })
  },
  bindMultiPickerColumnChange: function(e) {
    switch (e.detail.column) {
      case 0:
        list = []
        for (var i = 0; i < that.data.objectMultiArray.length; i++) {
          if (that.data.objectMultiArray[i].parid == that.data.objectMultiArray[e.detail.value].regid) {
            list.push(that.data.objectMultiArray[i].regname)
          }
        }
        that.setData({
          "multiArray[1]": list,
          "multiIndex[0]": e.detail.value,
          "multiIndex[1]": 0
        })

    }
  }

})