Rumah  >  Artikel  >  hujung hadapan web  >  使用原生js实现省市区三级联动

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

亚连
亚连asal
2018-06-06 10:09:362731semak imbas

这篇文章主要介绍了原生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中实战项目(详细教程)

Atas ialah kandungan terperinci 使用原生js实现省市区三级联动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn