原生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生成不重复的随机数组的简单实例

    下面小编就为大家带来一篇JS生成不重复的随机数组的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Javascript动画效果(2)

    Javascript动画效果(2)

    这篇文章主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 微信小程序实现传参数的几种方法示例

    微信小程序实现传参数的几种方法示例

    这篇文章主要给大家介绍了关于微信小程序实现传参数的几种方法,分别是navigator跳转时、全局变量、列表index下标取值以及form表单传值的相关内容,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • 使用Microsoft Ajax Minifier减小JavaScript文件大小的方法

    使用Microsoft Ajax Minifier减小JavaScript文件大小的方法

    大家用来减小JavaScript文件下载大小的常见的方式有2种: 压缩(compression)和缩小(minification)。
    2010-04-04
  • JavaScript页面回流与重绘

    JavaScript页面回流与重绘

    这篇文章主要介绍了JavaScript页面回流与重绘,一个html页面是一个整体,当这个整体中的某一个部分发生改变,那么这个页面整体会重新进行渲染,而如果我们采用添加标签的方式,每次添加一个标签,就会让每一次页面都重新渲染,性能急剧下降,下面来看看具体内容吧
    2022-01-01
  • 微信网页登录逻辑与实现方法

    微信网页登录逻辑与实现方法

    这篇文章主要介绍了微信网页登录逻辑与实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • JavaScript创建对象的四种常用模式实例分析

    JavaScript创建对象的四种常用模式实例分析

    这篇文章主要介绍了JavaScript创建对象的四种常用模式,结合实例形式分析了javascript使用工厂模式、构造函数模式、原型模式及动态原型模式创建对象的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-01-01
  • JS实现两个大数(整数)相乘

    JS实现两个大数(整数)相乘

    大数,即超出语言所能表示的数字最大范围的数字,那么如何实现两个大数相乘呢?下面有个不错的方法,大家可以参考下
    2014-04-04
  • Javascript HTML5 Canvas实现的一个画板

    Javascript HTML5 Canvas实现的一个画板

    这篇文章主要为大家详细介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • IFrame跨域高度自适应实现代码

    IFrame跨域高度自适应实现代码

    最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
    2012-08-08

最新评论