微信小程序 省份固定的城市联动效果

朋友刚做小程序，需要做一个分开的并且省份固定的城市联动效果找到我，我查看一下官方文档确实没有，所以我自己找了个城市的数组取了一部分做了个demo，在此记录一下。

wxml

<view class="section">
  <view class="section__title">当前省份</view>
  <view class="picker">当前选择：河北省</view>
</view>

<view class="section">
  <view class="section__title">选择市</view>
  <picker bindchange="bindPickerChange" value="{{index1}}" range="{{dataArr}}" range-key="text">
    <view class="picker">
      当前选择：{{dataArr[index1].text}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">选择区（县）</view>
  <picker value="{{index2}}" range="{{dataArr[index1].children}}" range-key="text">
    <view class="picker">
      当前选择：{{dataArr[index1].children[index2].text}}
    </view>
  </picker>
</view>

js

Page({
  data: {
    dataArr: [
        {
          value: "130100",
          text: "石家庄市",
          children: [{
            value: "130102",
            text: "长安区"
          }, {
            value: "130103",
            text: "桥东区"
          }, {
            value: "130104",
            text: "桥西区"
          }, {
            value: "130105",
            text: "新华区"
          }, {
            value: "130107",
            text: "井陉矿区"
          }, {
            value: "130108",
            text: "裕华区"
          }, {
            value: "130121",
            text: "井陉县"
          }, {
            value: "130123",
            text: "正定县"
          }, {
            value: "130124",
            text: "栾城县"
          }, {
            value: "130125",
            text: "行唐县"
          }, {
            value: "130126",
            text: "灵寿县"
          }, {
            value: "130127",
            text: "高邑县"
          }, {
            value: "130128",
            text: "深泽县"
          }, {
            value: "130129",
            text: "赞皇县"
          }, {
            value: "130130",
            text: "无极县"
          }, {
            value: "130131",
            text: "平山县"
          }, {
            value: "130132",
            text: "元氏县"
          }, {
            value: "130133",
            text: "赵县"
          }, {
            value: "130181",
            text: "辛集市"
          }, {
            value: "130182",
            text: "藁城市"
          }, {
            value: "130183",
            text: "晋州市"
          }, {
            value: "130184",
            text: "新乐市"
          }, {
            value: "130185",
            text: "鹿泉市"
          }, {
            value: "130186",
            text: "其它区"
          }]
        }, {
          value: "130200",
          text: "唐山市",
          children: [{
            value: "130202",
            text: "路南区"
          }, {
            value: "130203",
            text: "路北区"
          }, {
            value: "130204",
            text: "古冶区"
          }, {
            value: "130205",
            text: "开平区"
          }, {
            value: "130207",
            text: "丰南区"
          }, {
            value: "130208",
            text: "丰润区"
          }, {
            value: "130223",
            text: "滦县"
          }, {
            value: "130224",
            text: "滦南县"
          }, {
            value: "130225",
            text: "乐亭县"
          }, {
            value: "130227",
            text: "迁西县"
          }, {
            value: "130229",
            text: "玉田县"
          }, {
            value: "130230",
            text: "唐海县"
          }, {
            value: "130281",
            text: "遵化市"
          }, {
            value: "130283",
            text: "迁安市"
          }, {
            value: "130284",
            text: "其它区"
          }]
        }, {
          value: "130300",
          text: "秦皇岛市",
          children: [{
            value: "130302",
            text: "海港区"
          }, {
            value: "130303",
            text: "山海关区"
          }, {
            value: "130304",
            text: "北戴河区"
          }, {
            value: "130321",
            text: "青龙满族自治县"
          }, {
            value: "130322",
            text: "昌黎县"
          }, {
            value: "130323",
            text: "抚宁县"
          }, {
            value: "130324",
            text: "卢龙县"
          }, {
            value: "130398",
            text: "其它区"
          }, {
            value: "130399",
            text: "经济技术开发区"
          }]
        }, {
          value: "130400",
          text: "邯郸市",
          children: [{
            value: "130402",
            text: "邯山区"
          }, {
            value: "130403",
            text: "丛台区"
          }, {
            value: "130404",
            text: "复兴区"
          }, {
            value: "130406",
            text: "峰峰矿区"
          }, {
            value: "130421",
            text: "邯郸县"
          }, {
            value: "130423",
            text: "临漳县"
          }, {
            value: "130424",
            text: "成安县"
          }, {
            value: "130425",
            text: "大名县"
          }, {
            value: "130426",
            text: "涉县"
          }, {
            value: "130427",
            text: "磁县"
          }, {
            value: "130428",
            text: "肥乡县"
          }, {
            value: "130429",
            text: "永年县"
          }, {
            value: "130430",
            text: "邱县"
          }, {
            value: "130431",
            text: "鸡泽县"
          }, {
            value: "130432",
            text: "广平县"
          }, {
            value: "130433",
            text: "馆陶县"
          }, {
            value: "130434",
            text: "魏县"
          }, {
            value: "130435",
            text: "曲周县"
          }, {
            value: "130481",
            text: "武安市"
          }, {
            value: "130482",
            text: "其它区"
          }]
        }],
    index1: 0,
    index2: 0
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index1: e.detail.value
    })
  }
})

 

数据是别处找的，其中的 ‘value ’ 此处并没有用上，~懒得删~