原生js实现省市区三级联动代码分享


Posted in Javascript onFebruary 12, 2018

前言

插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star

准备

<div id="wrap"></div>

页面中的容器标签不限制,只需给个id就行

var address = new Address({
  wrapId: 'wrap',
  showArr: ['provinces','citys','areas'],
  beforeCreat:function(){
    console.log("beforeCreat")
  },
  afterCreat:function(){
    console.log('afterCreat');
  }
})
wrapId:"wrap" // 此处的wrap就是上面容器的id 
showArr: ['provinces','citys','areas'] // 此处分别代表省、市、区容器的id

举个例子:如果传递的数组['provinces','citys','areas']长度为3,那么将会出现省市区,数组中三个字符串分别是省、市、区容器的id

原生js实现省市区三级联动代码分享

如传递的数组['provinces','citys']长度为2个,那么将会出现省市,数组中的两个字符串分别是省、市容器的id

原生js实现省市区三级联动代码分享

如数组长度为1的时候就不说了

beforeCreat 插件开始创建前执行的回调函数

afterCreat 插件创建完成后执行的回调函数

原生js实现省市区三级联动代码分享

预览

原生js实现省市区三级联动代码分享

总结

如有什么功能需要增加的,可在评论区留言,我尽量满足。如有什么疏忽或错误,希望您指出。我会尽早修改,以免误导他人。

Javascript 相关文章推荐
js计算精度问题小结
Apr 22 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 #Javascript
代码详解JS操作剪贴板
Feb 11 #Javascript
vue-router项目实战总结篇
Feb 11 #Javascript
vue项目实战总结篇
Feb 11 #Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 #Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 #Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
You might like
初识ThinkPHP控制器
2016/04/07 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
详解Python中where()函数的用法
2018/03/27 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
服装促销活动方案
2014/02/23 职场文书
就业协议书怎么填
2014/04/11 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
政风行风建设责任书
2014/07/23 职场文书
假期安全教育广播稿
2014/10/04 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
离婚协议书标准格式
2014/10/04 职场文书
严以律己学习心得体会
2016/01/13 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis