原生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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
js同时按下两个方向键
Dec 01 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
学习Node.js模块机制
Oct 17 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
vue 数据双向绑定的实现方法
Mar 04 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 一个随机字符串生成代码
2010/05/26 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php 抽象类的简单应用
2011/09/06 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
js 文件引入实现代码
2010/04/23 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
汽车专业毕业生自荐信
2013/11/03 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python 通过使用Yolact训练数据集
2021/04/06 Python
MySQL数据库完全卸载的方法
2022/03/03 MySQL
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL