原生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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Nodejs学习item【入门手上】
2016/05/05 NodeJs
js重写方法的简单实现
2016/07/10 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
javascript 易错知识点实例小结
2020/04/25 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python实现哈希表
2014/02/07 Python
对numpy中轴与维度的理解
2018/04/18 Python
pandas数据集的端到端处理
2019/02/18 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
公司投资建议书
2014/05/16 职场文书
促销活动总结模板
2014/07/01 职场文书
团代会闭幕词
2015/01/28 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js