先来张效果图，演示地址：http://long-woo.github.io/jquery-city/

1.动画效果使用的是animate.css

2.支持选择和键盘输入（中英文输入）

3.服务端返回的json格式

{

    "provinces": [ { "code": "1000", "name": "北京" }],

    "citys": [ { "code": "100001", "name": "北京", "fullPY": "BEIJING", "firstPY": "BJ", "provinceCode": "1000", "provinceName": "北京", "hotCity": true }],

    "areas": [ { "code": "10000101", "name": " 东城区", "cityId": "100001", "fullPY": " DONGCHENGOU", "firstPY": " DCO", "provinceCode": "1000", "provinceName": "北京", "cityCode": "100001", "cityName": "北京" }]

}

4.如何使用？

　　1).在<head>里面引用下面css资源

<link href="../css/jquery.city.css" rel="stylesheet" />

<link href="../css/animate.min.css" rel="stylesheet" /> <!--可选-->

　　2).在<body>里引用下面的js资源

<script src="../js/jquery-1.10.2.js"></script>

<script src="../js/jquery.city.js"></script>

　　3).使用示例

 <script>

     $(function () {

         $('#txt_city').jcity({

             urlOrData: '/js/citydata.json',

             animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' },  // 需要第一步引用的animate.min.css文件，也可以自己定义动画

             onChoice: function (data) {

                 console.log(data);

             }

         });

     });

 </script>

转载请标注原文地址：http://www.cnblogs.com/JasonLong/p/5278955.html

【开源】jquery省市区插件的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. Jquery相册插件（开源下载）

    一,导言 上次 “不定义JQuery插件,不要说会JQuery” 的博客写的肤浅,漏洞百出,而且最重要的是从理论上说如何定义一个jQuery插件,没有实质性的写一个jQuery插件出来,这未免是纸上谈 ...

  3. jQuery常用插件

    jQuery UI插件简介: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具 ...

  4. 移动开发必备！15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

  5. 不错的jQuery图表插件 .

    很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...

  6. 10个最好的 jQuery 视频插件(转)

    在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...

  7. 转:jQuery常用插件

    原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome      上传时间:2014-06-1 ...

  8. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  9. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

随机推荐

  1. 【前端统计图】echarts实现简单柱状图

    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  2. MySQL经常使用的面试题

    1.怎样登陆mysql数据库 MySQL -u username -p 2.怎样开启/关闭mysql服务 service mysql start/stop 3.查看mysql的状态 service m ...

  3. ios获取iphone手机设备型号

    iPhone6plus和iPhone6在放大模式下也可以获取: 导入: #import "sys/utsname.h" 调用: - (NSString*)deviceString ...

  4. JS----checked----checked选中和未选中的获取

    , allValue.length - 1); allValue = allValue.replace(/[ ]/g, ""); var checkedIds = allValue ...

  5. 查询系统状态 内存大小 cpu信息 设备负载情况

    1.1 查看内存状态 /proc/meminfo里面存放着内存的信息 查看内存命令(包括虚拟内存swap): free -h (低版本系统可能不支持-h) 或者 free -m (以mb单位显示) a ...

  6. OVS处理upcall流程分析

    处理upcall总体框架: 1.由函数handle_upcalls()批量处理(in batches)的是由内核传上来的dpif_upcalls,会解析出upcall的类型.这里主要看在内核中匹配流表 ...

  7. C# 创建文件释放 Dispose()

    System.IO.File.Create("文件路径") 前提确保有此路径, 否则会报错 本以为创建文件是会自动释放的, 结果没有自动释放 , fs.Write(response ...

  8. 常见Python 中pip用法(待继续添加)

    常见pip用法 * pip install numpy             --安装包numpy * pip uninstall numpy           --卸载包numpy * pip ...

  9. WPF Bind 绑定

    原文:WPF Bind 绑定 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/koloumi/article/details/74332515 用过W ...

  10. CentOS 由 JavaCPP 转让 FFMPEG

    1. Java 与 FFMPEG FFMPEG 它是一种广泛使用的媒体处理库,于Java天地,处理视频较弱的能力,因此,有非常大的需求需求Java 转让 FFMPEG. Java 转让C 的方式有非常 ...