微信小程序实现地区选择伪五级联动

 更新时间:2022年07月11日 10:37:25   作者:theOtherSky  
这篇文章主要为大家详细介绍了微信小程序实现地区选择伪五级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现地区选择伪五级联动的具体代码,供大家参考,具体内容如下

效果图

这里采用的是自定义多列选择器picker mode="multiSelector"

<view class="section">
    <view class="section__title">多列选择器</view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
      <view wx:if="{{multiIndex[0]==0}}" class="picker" style='font-size:24rpx'>
        当前选择:全国
      </view>
      <view wx:elif="{{multiIndex[1]==0}}" class="picker" style='font-size:24rpx'>
        当前选择:{{multiArray[0][multiIndex[0]]}}
      </view>
      <view wx:elif="{{multiIndex[2]==0}}" class="picker" style='font-size:24rpx'>
        当前选择:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
      </view>
      <view wx:elif="{{multiIndex[3]==0}}" class="picker" style='font-size:24rpx'>
        当前选择:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
      </view>
      <view wx:else class="picker" style='font-size:24rpx'>
        当前选择:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}-{{multiArray[3][multiIndex[3]]}}
      </view>
    </picker>
</view>

multiArray包含4个数组(省市县镇),multiIndex是4个数组对应选中下标 

onLoad: async function (options) {
    let chinaData = await getCountryList()
    chinaData.unshift({city: [],code: 0,name: "全部"})
    for(let one of chinaData){
        one.city.unshift({county: [],code: 0,name: "全部"})
        for(let two of one.city){
            two.county.unshift({code: 0,name: "全部"})
        }
    }
    this.data.chinaData = chinaData;
    let sheng = []; //  设置省数组
    for(let i = 0; i < chinaData.length; i++) {
       sheng.push(chinaData[i].name);
    }
    this.setData({
       "multiArray[0]": sheng
    })
    this.getCity(); // 得到市
},
    bindMultiPickerChange: function(e) {
        console.log(e);
    },
    bindMultiPickerColumnChange: function(e) {
        let move = e.detail;
        let index = move.column;
        let value = move.value;
        if (index == 0) {
          this.setData({
            multiIndex: [value,0,0,0]
          })
          this.getCity();
        }
        if (index == 1) {
          this.setData({
            "multiIndex[1]": value,
            "multiIndex[2]": 0,
            "multiIndex[3]": 0
          })
          this.getXian();
        }
        if (index == 2) {
          this.setData({
            "multiIndex[2]": value,
            "multiIndex[3]": 0,
     
          })
          this.getZhen();
        }
        if (index == 3) {
          this.setData({
            "multiIndex[3]": value
          })
          this.getZhen();
        }
    },
    getCity: function() { //  得到市
        let shengNum = this.data.multiIndex[0];
        let chinaData = this.data.chinaData;
        let cityData = chinaData[shengNum].city;
        let city = [];
        for (let i = 0; i < cityData.length; i++) {
          city.push(cityData[i].name)
        }
        this.setData({
          "multiArray[1]": city
        })
        this.getXian();
    },
    getXian: function(e) { //  得到县
        let shengNum = this.data.multiIndex[0];
        let cityNum = this.data.multiIndex[1];
        let chinaData = this.data.chinaData;
        let xianData = chinaData[shengNum].city[cityNum].county;
        let xian = [];
        for (let i = 0; i < xianData.length; i++) {
          xian.push(xianData[i].name)
        }
        this.setData({
          "multiArray[2]": xian
        })
        this.getZhen();
    },
    async getZhen(){//  得到镇
        let shengNum = this.data.multiIndex[0];
        let cityNum = this.data.multiIndex[1];
        let xianNum = this.data.multiIndex[2];
        let chinaData = this.data.chinaData;
        let zhen = [];
        if(chinaData[shengNum].city[cityNum].county[xianNum].code == 0){
            this.setData({
                "multiArray[3]" : ["全部"]
            })
        }else{
            //这里需要传县的code值获取镇的数据
            let res =  await getTownByCounty(chinaData[shengNum].city[cityNum].county[xianNum].code)
            let zhenData = JSON.parse(res.data.data.json)
            zhenData.unshift({code: 0,name: "全部"})
            for (let i = 0; i < zhenData.length; i++) {
                zhen.push(zhenData[i].name)
            }
            this.setData({
                "multiArray[3]" : zhen
            })
        }
    }

省市县数据返回类型

镇返回数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript原型继承工作原理和实例详解

    javascript原型继承工作原理和实例详解

    这篇文章主要为大家详细介绍了javascript原型继承,阐明什么是原型继承,以及在JavaScript中究竟如何使用原型继承,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 学习JavaScript图片预加载模块

    学习JavaScript图片预加载模块

    这篇文章主要介绍了js实现图片预加载的方法,内容很详细,带领大家全面认识js图片预加载模块,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js实现拉伸拖动iframe的具体代码

    js实现拉伸拖动iframe的具体代码

    这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下
    2013-08-08
  • JS实现弹出居中的模式窗口示例

    JS实现弹出居中的模式窗口示例

    这篇文章主要介绍了JS实现弹出居中的模式窗口,涉及javascript模式窗口及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js无提示关闭浏览器窗口的两种方法分析

    js无提示关闭浏览器窗口的两种方法分析

    这篇文章主要介绍了js无提示关闭浏览器窗口的两种方法分析,需要的朋友可以参考下
    2016-11-11
  • 把json格式的字符串转换成javascript对象或数组的方法总结

    把json格式的字符串转换成javascript对象或数组的方法总结

    下面小编就为大家带来一篇把json格式的字符串转换成javascript对象或数组的方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 小程序实现上传视频功能

    小程序实现上传视频功能

    这篇文章主要为大家详细介绍了小程序实现上传视频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS简单实现无缝滚动效果实例

    JS简单实现无缝滚动效果实例

    这篇文章主要介绍了JS简单实现无缝滚动效果,结合完整实例形式分析了javascript实现图片无缝滚动效果的实现技巧,涉及javascript结合时间函数定时触发动态修改页面元素属性的相关操作方法,需要的朋友可以参考下
    2016-08-08
  • 小程序实现筛子抽奖

    小程序实现筛子抽奖

    这篇文章主要为大家详细介绍了小程序实现筛子抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JavaScript中的location、history、navigator对象实例介绍

    JavaScript中的location、history、navigator对象实例介绍

    这篇文章主要介绍了JavaScript中的location、history、navigator对象实例介绍,需要的朋友可以参考下
    2023-05-05

最新评论