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


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 tab效果的实现代码
Dec 26 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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 escape URL编码
2008/12/10 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript中string对象
2015/06/12 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python中列表和元组的区别
2017/12/18 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python中with用法讲解
2020/02/07 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
酒店行政人事部经理职务说明书
2014/02/26 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
股权转让协议书范本
2014/04/12 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
上课迟到检讨书
2015/05/06 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Nginx 匹配方式
2022/05/15 Servers