原生JavaScript实现省市区三级联动插件详解

前言与插件说明

前言

该插件的功能设计主要基于我司的具体业务场景。若读者有其他功能需求，欢迎在评论区留言，我将尽力进行扩展。如果您觉得此项目有用或喜欢，不妨给我的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 插件创建完成后执行的回调函数

效果预览与总结

预览

总结

如有其他功能需要增加，欢迎在评论区留言，我将尽力满足需求。若发现任何疏忽或错误，恳请指出，我会尽快修改以避免误导他人。