原生js实现省市区三级联动代码分享
前言
插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我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
如传递的数组['provinces','citys']
长度为2个,那么将会出现省市,数组中的两个字符串分别是省、市容器的id
如数组长度为1的时候就不说了
beforeCreat
插件开始创建前执行的回调函数
afterCreat
插件创建完成后执行的回调函数
预览
总结
如有什么功能需要增加的,可在评论区留言,我尽量满足。如有什么疏忽或错误,希望您指出。我会尽早修改,以免误导他人。
您可能感兴趣的文章:
- vue.js模仿京东省市区三级联动的选择组件实例代码
- js 实现省市区三级联动菜单效果
- JavaScript省市区三级联动菜单效果
- JSON+Jquery省市区三级联动
- javascript省市区三级联动下拉框菜单实例演示
- javascript实现省市区三级联动下拉框菜单
- 省市区三级联动下拉框菜单javascript版
- javascript实现简单的省市区三级联动
- PHP+Mysql+Ajax+JS实现省市区三级联动
- 从QQ网站中提取的纯JS省市区三级联动菜单
- js实现一个省市区三级联动选择框代码分享
相关推荐
-
javascript省市区三级联动下拉框菜单实例演示
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">
-
从QQ网站中提取的纯JS省市区三级联动菜单
我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat
-
javascript实现简单的省市区三级联动
当我们注册一个网站,会看到省市区三级联动,下面简单介绍一下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="&
-
JSON+Jquery省市区三级联动
效果图如下所示: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--读取数据库,以json的格式输出,然后复制json数据,创建js文件--> <script src="json/CityJson.js" type="text/j
-
JavaScript省市区三级联动菜单效果
本文实例为大家分享了三级联动省市区js完整代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var c
-
js 实现省市区三级联动菜单效果
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>省市区三级联动</title> </head> <body> <form> <select id="province"> <option>请选择省份</option> </se
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
vue.js模仿京东省市区三级联动的选择组件实例代码
前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section cl
随机推荐
- 解决vue.js在编写过程中出现空格不规范报错的问题
- 在Oracle的函数中,返回表类型的语句
- 动态改变ASP.net页面标题和动态指定页面样式表的方法
- Java生成MD5加密字符串代码实例
- 完美兼容各大浏览器获取HTTP_REFERER方法总结
- 深入委托与多播委托的详解
- 扒一扒JavaScript 预解释
- 全新2006高校BBS上的100条苦涩语录
- Windows下php5+apache+mysql5 手工搭建笔记
- Android 如何查看Wifi密码
- Spring Boot 整合mybatis 与 swagger2
- 使用JavaScript实现alert的实例代码
- C++设计模式之享元模式
- Android实现朋友圈评论回复列表
- Golang数组的传递详解
- C++从txt文件中读取二维的数组方法
- 用易语言COM对象取文件版本
- 基于laravel-admin 后台 列表标签背景的使用方法
- python实现大转盘抽奖效果
- SpringBoot项目执行脚本 自动拉取最新代码并重启的实例内容