原生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 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
详解Angular 自定义结构指令
Jun 21 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
vue--vuex详解
Apr 15 Javascript
简单通过settimeout看javascript的运行机制
May 10 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
document.createElement()用法
2013/03/13 Javascript
js中function()使用方法
2013/12/24 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
python求众数问题实例
2014/09/26 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python与pycharm有何区别
2020/07/01 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
农贸市场管理制度
2014/01/31 职场文书
三严三实对照检查材料
2014/08/25 职场文书
大学生实训报告总结
2014/11/05 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
python区块链实现简版工作量证明
2022/05/25 Python