原生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 相关文章推荐
用jquery来定位
Feb 20 Javascript
javascript实现的动态文字变换
Jul 28 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
javascript实现控制div颜色
Jul 07 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
从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
一个简单且很好用的php分页类
2013/10/26 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
JavaScript实现多个物体同时运动
2020/03/12 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python 切片和range()用法说明
2013/03/24 Python
Python中格式化format()方法详解
2017/04/01 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python3字符串操作总结
2019/07/24 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
年度考核自我鉴定
2014/02/02 职场文书
视光学专业自荐信
2014/06/24 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android