首页 >web前端 >js教程 >使用原生js实现省市区三级联动

使用原生js实现省市区三级联动

亚连
亚连原创
2018-06-06 10:09:362786浏览

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

前言

插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star

准备

<p id="wrap"></p>

页面中的容器标签不限制,只需给个id就行

var address = new Address({
  wrapId: &#39;wrap&#39;,
  showArr: [&#39;provinces&#39;,&#39;citys&#39;,&#39;areas&#39;],
  beforeCreat:function(){
    console.log("beforeCreat")
  },
  afterCreat:function(){
    console.log(&#39;afterCreat&#39;);
  }
})
wrapId:"wrap" // 此处的wrap就是上面容器的id 
showArr: [&#39;provinces&#39;,&#39;citys&#39;,&#39;areas&#39;] // 此处分别代表省、市、区容器的id

举个例子:如果传递的数组['provinces','citys','areas']长度为3,那么将会出现省市区,数组中三个字符串分别是省、市、区容器的id

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

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

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

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

预览

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Webpack中路径压缩图片上传尺寸获取的问题(详细教程)

在ES6中详细解读let和闭包

在vue+iview+less+echarts中实战项目(详细教程)

以上是使用原生js实现省市区三级联动的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn