支付宝小程序实现省市区三级联动


Posted in Javascript onJune 21, 2020

本文实例为大家分享了支付宝小程序实现省市区三级联动的具体代码,供大家参考,具体内容如下

背景

最近做的项目 有省市区联动。不仅要传name还要把对应的id发给后台。
支付宝提供的级联有 my.multiLevelSelect 和picker并不能满足需求。
picker 组件不支持多列选择,所以使用 picker-view 组件和Popup配合使用。

实现效果图

支付宝小程序实现省市区三级联动

支付宝小程序实现省市区三级联动

数据结构
citys - 城市 areas - 区

当然这是处理之后的,行政区划树 不长这样子。

[{
 code:1,
 name:'北京',
 areas:[
  {
  code: 101,
  name:'朝阳区'
  },
  {
  code: 101,
  name:'丰台区'
  }
 ]
 },{
 code:2,
 name:'河北省',
 citys:[
  {
  code: 20,
  name:'石家庄市',
  areas:[{
   code:'201',
   name:'长安区'
  }]
  }
 ]
 }]

详细实现 仅供参考

//ahtml
<popup show="{{showBottom}}" position="bottom" onClose="onPopupClose" className="cityPop">
 <view class="flex">
 <view onTap="onPopupClose">取消</view>
 <view onTap="bindMultiPickerChange" class="confrim">确定</view>
 </view>
 <view>
  <picker-view value="{{multiIndex}}" onChange="bindMultiPickerColumnChange" class="mypicker">
  <block a:for="{{multiArray}}">
   <picker-view-column key="{{index}}">
   <block a:for="{{item}}" a:for-item="colItem">
    <view key="{{colItem.code}}">{{colItem.name}}</view>
   </block>
   </picker-view-column>
  </block>
 </view>
 </popup>
// 滚动选择 
bindMultiPickerColumnChange(e) {
 // 注意处理直辖市自治区(nodeType =2 -- citys(null) areas(Array))与其他省份(nodeType=1 -- citys(Array) areas(Array))
 let newColums = e.detail.value;
 let {
  multiIndex
 } = this.data;
 let newMultiIndex=[]
 if(multiIndex[0]!=newColums[0]) {
  newMultiIndex=[newColums[0], 0, 0]
  }else {
  newMultiIndex=[multiIndex[0], newColums[1],newColums[2]|| 0]
  };
 console.log('修改的列为', newMultiIndex);
 var data = {
  multiArray: this.data.multiArray,
  multiIndex: newMultiIndex
 };
 var data.multiArray[0] = this.data.provinces;
 if ((temp[data.multiIndex[0]].citys) && (temp[data.multiIndex[0]].citys).length > 0) {
  //如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
  data.multiArray[1] = temp[data.multiIndex[0]].citys || [];
  var areaArr = (temp[data.multiIndex[0]].citys[data.multiIndex[1]]) && (temp[data.multiIndex[0]].citys[data.multiIndex[1]]).areas || [];
  //如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值;否则赋值为空数组
  data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
 } else {
  //如果第二列“市”的个数不大于0,那么第二列“市”和第三列“区”都赋值为空数组
  //直辖市citys = null,直接赋值areas
  data.multiArray[1] = [];
  data.multiArray[2] = temp[data.multiIndex[0]].areas || [];
 }
 this.setData({
  multiArray: data.multiArray,
  multiIndex: data.multiIndex,
 });
 }
// 点击确定时 修改显示
bindMultiPickerChange: function(e) {
 let {
  multiArray,multiIndex
 } = this.data;
 let provinceName,
  cityName,
  districtName,
  provinceId,
  cityId,
  districtId;
 provinceName = multiArray[0][multiIndex[0]].name;
 cityName = multiArray[1].length > 0 ? multiArray[1][multiIndex[1]].name : '';
 districtName = multiArray[2].length > 0 ? multiArray[2][multiIndex[2]].name : '';
 provinceId = multiArray[0][multiIndex[0]].code;
 cityId = multiArray[1].length > 0 ? multiArray[1][multiIndex[1]].code : '';
 districtId = multiArray[2].length > 0 ? multiArray[2][multiIndex[2]].code : '';
 this.setData({
  provinceName,
  cityName,
  districtName,
  provinceId,
  cityId,
  districtId,
  region: provinceName + cityName + districtName,
  showBottom:false
 })
 }

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

Javascript 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
angular.bind使用心得
Oct 26 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
微信小程序实现canvas分享朋友圈海报
Jun 21 #Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 #Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 #Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
vue引入静态js文件的方法
Jun 20 #Javascript
详解Vue之计算属性
Jun 20 #Javascript
微信小程序实现多图上传
Jun 19 #Javascript
You might like
一个典型的PHP分页实例代码分享
2011/07/28 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
javascript 解析url的search方法
2010/02/09 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python和pyqt实现360的CLable控件
2014/02/21 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python类的动态绑定实现原理
2020/03/21 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python各种excel写入方式的速度对比
2020/11/10 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
写自荐信的注意事项
2014/03/09 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏