国际惯例先上效果图：

省市区三级联动，选择省自动刷新市，选择市自动刷新区，点击取消自动返回上一级重新选择，点击确定，保存地址。

数据库

这份数据库是某天在网上逛到的，当时未记录出处，直接贴出给读者使用，实在不妥，此处仅贴出表结构，方便大家交流学习。如有读者了解此份数据出处，烦请留言，谢谢！

数据表结构如下：

部分使用到的字段信息：

id:唯一标识每一个数据

名称：地区名

父id:上级地区的id，若parent_id=0，表示无上级信息，当前即为最高行政区。

额外：主要标识少数民族自治州或者自治县的信息，如：巴音郭楞蒙古自治州，此处存储蒙古

例：

后缀：行政级别市省县区等

部分地区数据信息如下：

后台

后台仅需提供一个接口，根据父id，查询地区信息

此处使用的后台是地对地导弹(地对地导弹)框架，贴出主要接口、sql

1.与小程序交互接口

@RequestMapping(值='/getArea '，方法=RequestMethod .POST)private @响应正文列表区getArea(HttpServletrequest请求){ int parentId=整数。parsent(请求。get parameter(' ParentID ')；伐木工。信息(' GetArea ')；list区列表=new Arraylistdistrict()；请尝试{ list=DistServiCe。GetAreas(ParentID)；}捕获（例外e) { }返回列表；}2.查询结构化查询语言

选择id='getAreas '结果类型='区'！-具体的sql - SELECT id，concat(名称，额外，后缀)作为名称，parent_id作为父id FROM区WHERE parent _ id=# { parent id }/SELECT前端

先贴出css:热门城市{ padding-right : 50 rpx；margin: auto}。weui-grid { padd : 10 rpx 0；宽度： 160 rpx盒子尺寸：边框盒子；border: 1rpx固体# ecece border-radius : 8 rpx；背景-颜色：白色；边距： 8 rpx 0；} .weui-grids { display : flex；挠曲方向：行；正义-内容：空格；} .weui-grid _ _ label { display : }块；文本对齐：中心；color : # 333 font-size : 30 rpx；空白： nowrap文本-飞越：省略号；飞越：隐藏；}.县{ display:灵活柔性包装：包装；边距-top : 30px；左边距left: 15px}/**头部CSS * */1 .headTitle { display: flex}。头部按钮{背景： # f 68135边界半径： 25 rpxborder: 1px固体# f 68135 color : # fffh three : 80 rpx线高： 80 rpxmargin: 0自动宽度： 150 rpxfont-size : 45 rpx文本对齐：中心；padding:0px垂直对齐：毫米；}html

超文本标记语言仅由两部分组成：

头部：确定、取消按钮，显示当前选择地址信息

确定取消主要绑定了两个方法：提交选择及cancleChoose两个方法，点击不同按钮，执行不同射流研究…方法。

显示当前地址信息：最终城市，只要在射流研究…中使用设置数据设置该值，该值就会动态改变。

城市：显示当前可选的地区

使用街区组件，对数据数组区域列表进行循环显示，同样，使用设置数据设置该值，该值就会动态改变，达到省市区联动选择的效果。每一个小地区控件，有绑定区域方法，并且在用户选择该地区，执行绑定区域方法时，使用资料数据名的方法，向后台传递用户选择数据。

view class=' head title ' button class=' head button ' bind tap=' cancel choose '取消/button视图{ {金融城==' '？'请选择地址： finalCity}}/viewbutton类=" HeAd Button " bind tap=" SubmIt choose "确定/button/view view class=' country ' block class=' Hotcity ' wx : for-items=' { { AreList } } ' wx : key=' id ' view class=' weui-grid ' style=' margin-right : 16rpx；data-ParentId=' { { item。ParentId } } ' data-id=' { { item。id } } ' data-city=' { { item。name } } ' bind tap=' BiNDARea ' view class=' weui-grid _ label ' { item。name } }/view/view/block/view js:

//页面/选择城市/选择城市。js/获取应用实例const model=require('./城市选择/城市选择。js ')const config=require('././utils/config。js ')const util=require('././utils/util。js’)const app=GetApp()；//记录省市区var nav=0；var chooseCity=新数组(3);//记录每一次的parentIdvar finalParentId=新数组(3);定义变量标志=0;页面({ /** *页面的初始数据*/data : { final city 3360 ' '，}，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ //parentId=0取所有省份数据变量=这个；那个。get data(0)；选择城市=新数组(""、""、"");finalParentId=新数组(0,0,0);nav=0；}，提交选择：函数(e){ if(flag！=1){ util.showLog('请选择完整地址)返回；}else{ var address_components={ '省' : ' ','市' : ' ','区' : ' ' };address_components['省份]=选择城市[0]；address _ components[' city ']=选择城市[1]；address _ components[' district ']=选择城市[2]；控制台。日志(address _ components)；app。全球数据。地址_组件=地址_组件；wx。navigate back()；} }，cancelchoose e :函数(e){ console。日志(FinalParentID)；变量=这个；if(nav==0){ wx。navigate back()；} else { nav=nav-1；选择城市[导航]=' ';控制台。日志(选择城市)；那个。setdata({ final city 3360选择城市[0]选择城市[1]选择城市[2]).} }，bindArea:函数(e){ if(flag==0){ console。日志(e)；变量=这个；var父id=e . CurrentTarget。数据集。id；var city=e . CurrentTarget。数据集。城市；那个。get data(ParentID)；选择城市[导航]=城市；最终父id[nav]=e . CurrentTarget。数据集。父id；导航；控制台。记录(选择城市)。setdata({ final city 3360选择城市[0]选择城市[1]选择城市[2]})} }，getData(parentId){ var that=this；var url=config.getArea '？parentId=' parentidwx . request({ URL : URL，success: (res)={ console.log('地区数据请求成功');如果(res.data.length！=0){ flag=0；//设置数据到全局变量那个。setdata({ arealist : RES . data，})；}else{ //防止用户再次点击；标志=1;} }，method: 'POST '，header : { ' content-type ' : ' application/x-www-form-URL编码；charset=utf-8 '，}，fail: (res)={ console.log('地区数据请求失败');} })})js解析

全局变量作用：

//记录用户已选择层次

var nav=0；

//记录省市区三级数据

var chooseCity=新数组(3);

//记录每一次的parentId，主要记录用户选择路径，取消时根据用户路径显示上一级数据

var finalParentId=新数组(3);

//记录是否已经到最底层，再无数据可以选择

定义变量标志=0;

执行过程：

进入页面执行装载生命周期函数，在装载中调用得到一条数据初始化数据，及默认显示行政级别为省的数据，即请求父编号为0的数据

获取数据：

getData(ParentID){ var=this；//请求的url，由后台决定，此处填入你的请求全球资源定位器(统一资源定位符)即可var url=config.getArea '？parentId=' parentidwx . request({ URL : URL，success: (res)={ console.log('地区数据请求成功');如果(res.data.length！=0){ flag=0；//设置数据到全局变量那个。setdata({ arealist : RES . data，})；}else{ //已到最后一层数据标志=1;} }，method: 'POST '，header : { ' content-type ' : ' application/x-www-form-URL编码；charset=utf-8 '，}，fail: (res)={ console.log('地区数据请求失败');} }) },点击地区数据执行绑定区域

BindArea:函数(e) {//如果不在最后一级，可以执行If(flag==0){ console . log(e)；变量=这个；//获取html参数，点击information varparent id=e . current target . dataset . id；var city=e . CurrentTarget . dataset . city；//根据用户点击的数据，传入当前id作为下一层的parentId，请求下一层的数据，即. getdata(parentId)；//记录用户对chooseCity[nav]=city的选择；//当用户点击cancel时，需要使用当前parientid请求数据在该层显示。final parent id[nav]=e . current target . dataset . parent id；//记录路径数1 navConsole.log(chooseCity)//更新该. setdata的显示({ final city 3360 choose city[0]choose city[1]choose city[2]))，单击“取消”并执行cancleChoose方法

cancelchoose e : function(e){ var=this；//是最后一层，那么如果(nav==0){ wx . navigateback()；} else {//记录路径数-1 nav=nav-1；//清除上次选择的区域，选择城市[导航]=' '；console . log(choose city)；//更新. setdata({ final city 3360选择城市[0]选择城市[1]选择城市[2]})的选择数据//根据final parent中记录的各层请求数据更新. getdata (finalParentid [nav])的区域数据；}}，单击确定执行提交选择方法

提交选择：函数(e){//如果不在最后一级，说明地址还没有选择完全。如果不需要选择完整的地址，可以在这里删除如果(标志！=1){ util.showLog('请选择完整地址')返回；}else{//将数据存储在全局变量中，采用json存储省市数据var address _ components={ '省' : ' '，'市' : ' '，'区' : ' ' }；address_components['省份']=choose city[0]；address _ components[' city ']=choose city[1]；address _ components[' district ']=choose city[2]；console . log(address _ components)；app . global data . address _ components=address _ components；//返回上一页wx . navigateback()；}}，谢谢查看。希望在评论里贴cityChoose.js和util.js，贴在下面。注意：并非所有的方法都需要在util.js中使用。

希望能帮到大家。

城市选择

//页面/选择城市/选择城市。js/获取应用实例const model=require('./城市选择/城市选择。js ')const config=require('././utils/config。js ')const util=require('././utils/util。js’)const app=GetApp()；//记录省市区var nav=0；var chooseCity=新数组(3);//记录每一次的parentIdvar finalParentId=新数组(3);//记录是否到最后一级定义变量标志=0;页面({ /** *页面的初始数据*/data : { final city 3360 ' '，}，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ //parentId=0取所有省份数据变量=这个；那个。get data(0)；选择城市=新数组(""、""、"");finalParentId=新数组(0,0,0);nav=0；}，提交选择：函数(e){ if(flag！=1){ util.showLog('请选择完整地址)返回；}else{ var address_components={ '省' : ' ','市' : ' ','区' : ' ' };address_components['省份]=选择城市[0]；address _ components[' city ']=选择城市[1]；address _ components[' district ']=选择城市[2]；控制台。日志(address _ components)；app。全球数据。地址_组件=地址_组件；wx。navigate back()；} }，cancelchoose e :函数(e){ console。日志(FinalParentID)；变量=这个；if(nav==0){ wx。navigate back()；} else { nav=nav-1；选择城市[导航]=' ';控制台。日志(选择城市)；那个。setdata({ final city 3360选择城市[0]选择城市[1]选择城市[2]).} }，bindArea:函数(e){ if(flag==0){ console。日志(e)；变量=这个；var父id=e . CurrentTarget。数据集。id；var city=e . CurrentTarget。数据集。城市；//刷新出下一级地址前重复点击控制台。日志(选择城市[nav-1])；console.log(城市);if(选择city[nav-1]==city){ return；}那个。GetDATa(ParentID)；选择城市[导航]=城市；最终父id[nav]=e . CurrentTarget。数据集。父id；导航；控制台。记录(选择城市)。setdata({ final city 3360选择城市[0]选择城市[1]选择城市[2]})} }，getData(parentId){ var that=this；var url=config.getArea '？parentId=' parentidwx . request({ URL : URL，success: (res)={ console.log('地区数据请求成功');如果(res.data.length！=0){ flag=0；//设置数据到全局变量那个。setdata({ arealist : RES . data，})；}else{ //防止用户再次点击；标志=1;} }，method: 'POST '，header : { ' content-type ' : ' application/x-www-form-URL编码；charset=utf-8 '，}，fail: (res)={ console.log('地区数据请求失败');} }) }，})util.js

常量格式时间=日期={常量年=日期。getfullyear()const month=date。getmonth()1 const day=date。getdate()const hour=date。gethours()常量分钟=日期。getminutes()const second=date。getseconds()返回[年、月、日]。地图（格式号)。联接('/')' '[小时、分钟、秒]。地图（格式号)。join(' : ')} const format number=n={ n=n . tostring()返回n[1]？n : '0' n}函数显示日志(e){ wx。显示吐司({ title : e，icon: 'none' })函数trim(str){返回str.replace(/(^s*)|(s*$)/g,')；}函数ShowLoAding(){ wx。ShowLoAding({ title : '加载中，mask: true })} //验证码倒计时函数电话代码(t，秒){ //t是这个，第二个是重新发送的间隔时间，需要设置按钮可点击var s=秒；//避免重复点击t . setdata({ phone _ code _ text :s '，phone_code_class: ' '，phone _ code _ buff : true })；//倒计时var clock=set interval(function(){ if(s ^ 1){ t . setdata({ phone _ code _ text :-s ' s })} else { clear interval(clock)；t . setdata({ phone _ code _ text : '重新发送，phone_code_class: 'on '，phone _ code _ buff : false })；//重置数据s=秒；} },1000)}函数getnoformatdate(){ var Date=new Date()；var分隔符1='-'；var年份=日期。getfull year()；var month=日期。get month()1；var strDate=日期。getdate()；if(month=1 month=9){ month=' 0 ' month；} if(Strdate=0 Strdate=9){ Strdate=' 0 ' Strdate；} var currentdate=年九月一日月seperator1 strDate返回当前日期；}函数checkAndCall(sourceId，recordType，tele，app，config){ console。日志(app。全球数据。haulserinfo)控制台。日志(远程)；if(app。全球数据。haulserinfo==null){显示日志('正在获取用户数据，请稍后)应用程序承诺。然后(函数(值)){控制台。日志(值)；if(value){//success wx。拨打电话({电话号码： tele，success: ph={ mycall(config，app，recordType，sourceId，function () { //记录联系次数})} })else {//失败显示日志('注册完成即可联系' '。即将跳转)setTimeout(函数(){ wx。navigateto({ URL : ')./registUser/registUser '，}) }，1000)；} }).捕捉(函数（错误){ });} else {//success wx。拨打电话({电话号码： tele，success: ph={ mycall(config，app，recordType，sourceId，function () { //记录联系次数}) } }) }} //记录互相联系函数mycall(配置、应用程序、记录类型、sourceId、回调){ console。log(类型为(RecordType))var=this；wx。请求({ URL : config。插入记录，method: 'POST '，数据： { source id : source id，userid : app。全球数据。豪卢塞林弗。id，recordType: recordType }，标头： { ' content-type ' : ' application/x-www-form-URL encoded '，}，成功3: RES={ if(RES . data。成功){控制台.联系成功');回调();} else { show log(RES . data。错误)；} } } })模块。exports={ format number : format number，formatTime: formatTime，phone _ code _ clock : phone _ code，showLoading: showLoading，showLog: showLog，get now mata date : get now mata date，trim: trim，mycall: mycall，checkAndCall: checkAndCall}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。