原生js实现省市区三级联动代码分享

更新时间：2018年02月12日 09:13:41 投稿：laozhang

这篇文章主要介绍了原生js实现省市区三级联动功能以及代码分享，对此有需要的朋友可以参考学习下。

前言

插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我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

如传递的数组['provinces','citys']长度为2个，那么将会出现省市，数组中的两个字符串分别是省、市容器的id

如数组长度为1的时候就不说了

beforeCreat 插件开始创建前执行的回调函数

afterCreat 插件创建完成后执行的回调函数

预览

总结

如有什么功能需要增加的，可在评论区留言，我尽量满足。如有什么疏忽或错误，希望您指出。我会尽早修改，以免误导他人。

您可能感兴趣的文章:

使用JS正则表达式替换括号,尖括号等
下面小编就为大家带来一篇使用JS正则表达式替换括号,尖括号等。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
js实现随机圆与矩形功能
这篇文章主要为大家详细介绍了js实现随机圆与矩形功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
理解Javascript_12_执行模型浅析
大家有没有想过，一段javascript脚本从载入浏览器到显示执行都经过了哪些流程，其执行次序又是如何。本篇博文将引出'javascript执行模型'的概念，并带领大家理解javascript在执行时的处理机制。
2010-10-10
使用JavaScript实现实时搜索建议功能
在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
2024-02-02
js实现简单的省市县三级联动效果实例
这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-02-02
js 博客内容进度插件详解
本篇文章主要介绍了博客内容进度插件的实现方法，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
只要1K 纯JS脚本送你一朵3D红色玫瑰
这篇文章主要介绍了只要1K大小，纯JS脚本送你一朵3D玫瑰花，属于你的情人节专属玫瑰，感兴趣的小伙伴们可以参考一下
2016-08-08
JavaScript数据类型学习笔记分享
这篇文章主要为大家分享了JavaScript数据类型学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
JavaScript关于prototype实例详解(超重点)
prototype是js里面给类增加功能扩展的一种模式,这篇文章主要介绍了JavaScript关于prototype（超重点）,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
javascript与css3动画结合使用小结
本文给大家讲述的是如何使用javascript结合CSS动画来实现一些占用资源更少，更优化的动画效果，思路十分巧妙，这里推荐给小伙伴们参考下。
2015-03-03