应用场景

可以供用户选择所在位置、喜好位置。可用于根据用户所选位置给用户提供该位置的特色美食，附近的电影院，周边环境等。

效果图展示

视频

支付宝省市区三级联动

图片

代码实现

点击按钮button，让其弹框。用户可在弹框中选择位置，选中后让其显示在第三个view标签里select。

HTML代码如下：

<view class="page-description">支付宝小程序省市区三级联动</view>
<button type="primary" @click="openMultiLevelSelect">按钮</button>
<view>{{select}}</view>

JavaScript代码如下：

provinceAndCity.js数据放在文末

//数据放在文末，安装你的文件位置引入即可
import provinceData from "@/pages-me/FacialRecognition/provinceAndCity.js"
export default {data() {return {data: provinceData.data,//数据放在文末select:''}},methods: {openMultiLevelSelect() {my.multiLevelSelect({title: '请选择位置', //级联选择标题list: this.data, //级联数据列表success: (res) => {console.log('省市区三级联动：',res)this.select=`您选择了${res.result[0].name}>${res.result[1].name}>${res.result[2].name}`my.alert({content: `您选择了${res.result[0].name}>${res.result[1].name}>${res.result[2].name}`})}});}},
}

主要代码讲解my.multiLevelSelect

以下从官网搬来讲解哈哈：

简介
my.multiLevelSelect 是级联选择功能 API。主要用于选择多级关联数据，例如省市区的信息选择。

使用限制
此 API 支持个人支付宝小程序、企业支付宝小程序使用。

入参
入参为 Object 类型，参数如下：

list里的数据为大家准备好了。放在文章末尾

provinceAndCity.js省市区数据（免费）

数据文件在审核当中，上传成功我会放在文末，如果急需数据也可以评论区或者私信我。第一次使用，不太会搞。截图为证哈哈哈哈

支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）相关推荐

一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
php省市区三级联动,thinkPHP实现的省市区三级联动功能示例
这篇文章主要介绍了thinkPHP实现的省市区三级联动功能,详细分析了thinkPHP实现省市区三级联动功能的详细步骤与相关操作技巧,需要的朋友可以参考下本文实例讲述了thinkPHP实现的省市区三 ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
java封装省市区三级json格式,2016中国省市区三级联动json格式.pdf
2016中国省市区三级联动json格式 2016 年中国省市区三级联的JSON 格式 {"北京市":{"name":"北京市"," ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...

支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）