原生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 LigerUI 使用教程表格篇(1)
Jan 18 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue中锚点的三种方法
Jul 06 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
vue 解决provide和inject响应的问题
Nov 12 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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python理解递归的方法总结
2019/01/28 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
业务副厂长岗位职责
2014/01/03 职场文书
文员岗位职责范本
2014/03/08 职场文书
测绘工程专业求职信
2014/07/15 职场文书
幼儿园保育员随笔
2015/08/14 职场文书