小程序中轻松实现省市区的三级联动，选择地区如此简单

时间：2025-01-22 11:43:53

介绍

省市区的三级联动，一般来说，还是挺麻烦的，但是好在，在小程序中，已经都做好了。

三级联动：其实没有什么特别的意义了，只是一种习惯的叫法，意思为通过省来确定市，通过市来确定区，由上一级决定下一级，所以是三级联动。

参数

在小程序中可以直接使用picker标签

mode 要设置为region，必须要填写

bindchange 绑定选择事件

绑定事件之中，通过可以获得省-市-区的文字值，通过可以获得省市区的编号值。这两项保存的值，均为数组，且都有三个元素。

简单使用

wxml中，使用如下代码

<picker mode="region" bindchange="addr_change">点击切换地址</picker>
<view wx:if="{{ addr[0] }}">您当前选择的地址为：{{ addr[0]}} - {{ addr[1] }} - {{ addr[2] }}</view>
<view wx:if="{{ code[0] }}">您当前地址的编号为：{{ code[0]}} - {{ code[1] }} - {{ code[2] }}</view>

js中，使用如下代码

Page({
  data: {
    addr: [],
    code: []
  },
  onLoad: function (options) {
    
  },
  addr_change(e){
    ({addr: });
    ({code: });
  }
})

相关文章