原生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实现复选框选中属性
Mar 25 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
常用的js方法合集
2017/03/10 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
JS实现滑动插件
2020/01/15 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
利用python求相邻数的方法示例
2017/08/18 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Python with语句用法原理详解
2020/07/03 Python
python 递归相关知识总结
2021/03/03 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
经典c++面试题四
2015/05/14 面试题
商务英语专业求职信范文
2014/01/28 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
政府采购方案
2014/06/12 职场文书
员工生日会策划方案
2014/06/14 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
施工安全员岗位职责
2015/04/11 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS