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. Using-JSONNET-for-dynamic-JSON-parsing

    原文 https://weblog.west-wind.com/posts/2012/Aug/30/Using-JSONNET-for-dynamic-JSON-parsing With the re ...

  2. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  3. 【记录】@Configuration注解作用 mybatis @Param作用

    参考地址: 1:https://www.cnblogs.com/duanxz/p/7493276.html 2:https://www.wandouip.com/t5i91156/ 3:https:/ ...

  4. CMakeLists.txt install

    本部分是关于ros CMakeLists.txt install  :可参考http://wiki.ros.org/catkin/CMakeLists.txt 1.CMakeLists.txt中的in ...

  5. bash date format

    Bash Date To format Bash Date to a required one, bash shell provides date command along with many fo ...

  6. Django Rest框架 流程详解

    什么是Restful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类审 ...

  7. springboot 2.x相关配置

    1.在配置文件中进行配置 #############指定项目中所有的日期类型返回json格式########### spring.jackson.date-format=yyyy-MM-dd HH:m ...

  8. oracle client 卸载

    1.停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 2.在开始菜单中,找到Universal Installer,运行Oracle Universal I ...

  9. 最近开发的项目,遇到用户上传excel文件并导入数据到系统这个需求,而有excel中有的单元格是日期格式,本文介绍怎么从excel中读取日期格式的数据。

    可以先判断单元格的类型,有的日期是字符串存储的,有的是按日期存储的(单元格按数字解析),代码如下: Cell cell = row.getCell(); Date date = null; if (c ...

  10. 匹配Luhn算法:可用于检测银行卡卡号

    匹配Luhn算法:可用于检测银行卡卡号 /** * http://www.cnblogs.com/JnKindle/p/5798974.html * * 匹配Luhn算法:可用于检测银行卡卡号 * * ...