原生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实现你值得拥有
Sep 22 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
php实现微信扫码支付
2017/03/26 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python处理大日志文件
2019/07/23 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python如何判断IP地址合法性
2020/04/05 Python
python dict乱码如何解决
2020/06/07 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
init进程的作用
2012/04/12 面试题
大学生个人推荐信范文
2013/11/25 职场文书
中秋节超市促销方案
2014/01/30 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
详解MySQL 联合查询优化机制
2021/05/10 MySQL
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS