原生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 相关文章推荐
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
从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
融入意大利的咖啡文化
2021/03/03 咖啡文化
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
cakephp常见知识点汇总
2017/02/24 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
实习生自荐信范文分享
2013/11/27 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
场地使用证明模板
2014/10/25 职场文书
世界环境日活动总结
2015/02/11 职场文书
课题研究阶段性总结
2015/08/13 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记