原生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的ajax基础上的超强GridView展示
Sep 18 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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仿discuz分页效果代码
2008/10/02 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python单例模式的多种实现方法
2019/07/26 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
小加工厂管理制度
2014/01/21 职场文书
农贸市场管理制度
2014/01/31 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
学生评语大全
2014/04/18 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
python中%格式表达式实例用法
2021/06/18 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
MySQL派生表联表查询实战过程
2022/03/20 MySQL