1、效果演示

2、npm安装扩展包依赖  ion-multi-picker 组件

npm install ion-multi-picker --save

3、在app.module.ts中导入插件模块

 import { MultiPickerModule } from 'ion-multi-picker';
@NgModule({
declarations: [
.....
],
imports: [
IonicModule.forRoot(MyApp),
//Import MultiPickerModule 模块
MultiPickerModule
],
bootstrap: [IonicApp],
entryComponents: [
.....
],
providers: []
})
export class AppModule {}

4、具体实例使用如下:

(1)获取本地省市区json数据

  

 //定义省市区数据源变量
public cityList = {
area:[]
};
//userInfo即为最终选中的省市区数据
public userInfo = {
province:"",
city:"",
district:""
};
// 获取本地城市列表服务
getCityData() {
return Observable.create(observer => {
this.http.get("./assets/area-data.json").subscribe(res => {
this.cityList['area'] = res;
}, err => {
this.handleError(err);
})
});
}
//获取选定的省市区
public getCityArea(){
let cityArr = document.getElementById("cities").innerText;
cityArr = this.Validate.trimBlank(cityArr);
if(cityArr == '省-市-区(县)'){
this.Pop.toast("请选择所在地区");
return false;
}
this.cityArr = cityArr.split("-");
this.userInfo.province = this.cityArr[0];
this.userInfo.city = this.cityArr[1];
this.userInfo.district = this.cityArr[2];
return this.userInfo;
}

5、模板渲染

 <ion-item>
<ion-label>城市</ion-label>
<ion-multi-picker id="cities" item-content [cancelText]="'取消'" [doneText]="'完成'" [placeholder]="userInfo.province == undefined ? '省-市-区(县)' : (userInfo.province + '-'+ userInfo.city +'-'+ userInfo.district)" [separator]="'-'" [multiPickerColumns]="cityList['area']"></ion-multi-picker>
</ion-item>

注意:其中 

   [multiPickerColumns]属性用于渲染获取到的本地省市区数据源

  [placeholder]属性用于初始化(已选中或未选中的)当前地区
  [cancelText]属性为取消按钮
  [cancelText]属性为完成按钮
  

ionic3 多级联动城市选择插件 ion-multi-picker的更多相关文章

  1. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  2. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  3. 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)

    周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...

  4. layui省市区三级联动城市选择

    基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...

  5. zepto.js移动端城市选择插件

    http://sc.chinaz.com/jiaoben/170327301850.htm

  6. jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件

    jquery插件课程1  幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...

  7. uniapp自定义picker城市多级联动组件

    uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...

  8. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  9. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

随机推荐

  1. arcpy脚本使用多接图表图斑对对应多幅影像进行裁边处理

    插个广告,制作ArcGIS的Tool工具学习下面的教程就对了: 零基础学习Python制作ArcGIS自定义工具观看链接 <零基础学习Python制作ArcGIS自定义工具>课程简介 先将 ...

  2. MVC通过重写OnActionExecuting获取控制器,方法和域

    一,如下代码 protected override void OnActionExecuting(ActionExecutingContext filterContext) {string _cont ...

  3. 微软宣布加入 OpenJDK 项目

    近日,微软的 Bruno Borges 在 OpenJDK 邮件列表中发布了一条消息,内容包含接下来发生的事情以及微软如何开始将其团队整合到 OpenJDK 社区.在邮件中,Bruno Borges ...

  4. Web前端基础学习-2

    盒子模型 在页面中,我们将所有的元素全部看做是一个盒子,页面布局就是将大大小小不同的盒子堆砌在一起,而一个盒子由以下几部分组成: padding:内边距,内容到边框的距离: margin:外边距,其他 ...

  5. 使用while循环实现菜单

  6. 转帖 Java生成和操作Excel文件

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

  7. Linux安装系统

    服务器与PC 服务器本质上也是以太计算机,相比较家用电脑而言区别如下: 1.服务器更加稳定 2.通常性能比家用机更高 运维工程师的核心职责 保证服务器不间断运行 提升访问效率 保证数据安全 要完成上面 ...

  8. Ceph介绍及原理架构分享

    https://www.jianshu.com/p/cc3ece850433 1. Ceph架构简介及使用场景介绍 1.1 Ceph简介 Ceph是一个统一的分布式存储系统,设计初衷是提供较好的性能. ...

  9. bzoj 2015

    http://www.lydsy.com/JudgeOnline/problem.php?id=2015 裸最短路(' '     ) 不过我最初以为是mst (' '    ) #include & ...

  10. 树莓派GPIO口驱动编写

    一.wiringpi写法 #include <wiringPi.h> #include <stdlib.h> int main(int argc,char *argv[]) { ...