原生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 - HTML的request类
Jan 09 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
使用Ajax实现进度条的绘制
Apr 07 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下获取http状态的实现代码
2014/05/09 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP常用技巧汇总
2016/03/04 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
JS验证字符串功能
2017/02/22 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python切换pip安装源的方法详解
2016/11/18 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
称象教学反思
2014/02/03 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
十佳少年事迹材料
2014/12/25 职场文书
老乡会致辞
2015/07/28 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Python Numpy之linspace用法说明
2021/04/17 Python
python基于tkinter制作下班倒计时工具
2021/04/28 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
SQL SERVER存储过程用法详解
2022/02/24 SQL Server