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


Posted in Javascript onFebruary 12, 2018

前言

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

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

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

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

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

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

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

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

预览

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

总结

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

Javascript 相关文章推荐
JavaScript创建对象的写法
Aug 29 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 #Javascript
代码详解JS操作剪贴板
Feb 11 #Javascript
vue-router项目实战总结篇
Feb 11 #Javascript
vue项目实战总结篇
Feb 11 #Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 #Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 #Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
You might like
php stream_get_meta_data返回值
2013/09/29 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JavaScript this绑定过程深入详解
2018/12/07 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python中return self的用法详解
2018/07/27 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
大一自我鉴定范文
2013/12/27 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
物流专业求职信
2014/06/30 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
Java 定时任务技术趋势简介
2022/05/04 Java/Android