原生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数组长度问题代码说明
Jan 20 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
从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(6) 面向对象
2010/02/16 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
导游词欢迎词
2015/02/02 职场文书
贷款收入证明格式
2015/06/24 职场文书
学雷锋感言
2015/08/03 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android