原生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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
利用vscode调试编译后的js代码详解
May 14 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
python如何为创建大量实例节省内存
2018/03/20 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
我心目中的好老师活动方案
2014/08/19 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
高中历史教学反思
2016/02/19 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python