先来张效果图，演示地址：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. USB 3.0规范中译本 第4章 超高速数据流模型

    本文为CoryXie原创译文,转载及有任何问题请联系cory.xie#gmail.com. 本章展示数据和信息如何在超高速上通过的一种高层次的描述.请阅读协议层一章关于低层次协议的细节.本章提供设备架 ...

  2. Xcode6 模拟器路径

    Xcode6公布后,出现了非常多的变动,功能性的变动,在这里不进行过多的赘述,在WWDC上苹果已经进行了讲述,网上也有非常多文章,这里要介绍的是一些不太easy发现的,但非常重要的小地方.      ...

  3. Sift算子特征点提取、描述及匹配全流程解析

    Sift之前的江湖 在Sift横空出世之前,特征点检测与匹配江湖上占据霸主地位的是角点检测家族.先来探究一下角点家族不为人知的恩怨情仇. 角点家族的族长是Moravec在1977年提出的Moravec ...

  4. 【84.62%】【codeforces 552A】Vanya and Table

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  5. PatentTips - Fast awake from low power mode

    BACKGROUND Electronic devices, such as electronic book readers ("eBook reader devices"), c ...

  6. GTID的限制

    1.不支持非事务引擎(从库报错,stop slave;start slave;忽略). 2.不支持create table ... select 语句复制(主库直接报错). 3.不允许一个SQL同时更 ...

  7. AlphaImageLoader用法

    在 IE6 中,能够非常方便地利用 img 的 src 属性,实现本地图片预览,然而在 IE7 中,这样的办法却行不通.须要用 AlphaImageLoader. AlphaImageLoader 说 ...

  8. 新一代Xamarin

    新一代Xamarin竟然可以将.NET代码原生编译成:Jar包供Java原生调用.swift类库.obj-c类库.C++类库 供目标平台传统代码直接调用 之前和很多朋友聊到Xamarin觉得确实不错, ...

  9. 【noip模拟】德充符

    时间限制:2s 内存限制:512MB [题目描述] 申徒嘉和郑子产都是伯昏无人的学生,子产因为申徒嘉是残疾人,非常看不起他,于是想要刁难他. 子产给了申徒嘉 n个数 a1,a2...an. 现在他要求 ...

  10. 一个2013届毕业生（踏上IT行业）的迷茫（5）

    很快就到了该找工作的时间了,听说这一年是历史上找工作的人对多的一年,我也不知道是怎么统计的,可信不可信.跑了大概快一个月了,终于有offer了,就这样在这里实习了3个月,一直工作到现在. 回忆了整个学 ...