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


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 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
微信小程序实现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之第一天
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
itchat接口使用示例
2017/10/23 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
教师自我反思材料
2014/02/14 职场文书
产品质量承诺范本
2014/03/31 职场文书
党员群众路线承诺书
2014/05/20 职场文书
英语求职信范文
2014/05/23 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
解决numpy和torch数据类型转化的问题
2021/05/23 Python
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Python字符串常规操作小结
2022/04/03 Python