先来张效果图，演示地址：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. php自定义排序数组usort和uasort（uasort保持索引关联）（usort($arr, "cmp");）（比较函数时很普通函数的写法：function cmp($a, $b)）

    php自定义排序数组usort和uasort(uasort保持索引关联)(usort($arr, "cmp");)(比较函数时很普通函数的写法:function cmp($a, $ ...

  2. wpf datagrid 的单元格内容超出列宽度

    ---恢复内容开始--- <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.mi ...

  3. MVVM初步搭建应用

    MVVM模式:利用 prism Microsoft.Practices.Prism.dllWPF Interaction框架简介 添加Interactions库的引用.主要添加如下两个DLL: Mic ...

  4. [GeekBand] 设计模式——工厂模式学习笔记

     本文参考文献:GeekBand课堂内容,授课老师:李建忠 :大话设计模式 其余的模式方法请自行查看Geekband相关课程,在此不累述. 这周的课题是: 针对DrawingSystem中的基类Sha ...

  5. ueditor在表单中的提交

    近期一直在找一个比較好点的WEB文本编辑器.发现ueditor还是不错的.可是在表单提交数据后有一些问题.由于他不像曾经的版本号一样提供一个虚拟的文本框去提交数据,所以网上搜索的结果都不能用了.依据u ...

  6. Dll注入技术之消息钩子

    转自:黑客反病毒 DLL注入技术之消息钩子注入 消息钩子注入原理是利用Windows 系统中SetWindowsHookEx()这个API,他可以拦截目标进程的消息到指定的DLL中导出的函数,利用这个 ...

  7. sublime Package Control 设备

    sublime  插件的官方网站 https://sublime.wbond.net/ 点击Installation watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5u ...

  8. idea 搭建 SpringBoot 集成 mybatis

    编译器:IDEA2018.2.3 环境:win10,jdk1.8,maven3.4 数据库:mysql 5.7 备注:截图较大,如果看不清,可以在图片上右键=>在新标签页中打开   查看高清大图 ...

  9. 如何用JS获取“ul”下边的“li”的个数

    <script type="text/javascript"> function OnbtnClick() { var txtCount=document.getEle ...

  10. DELPHI高性能大容量SOCKET并发（八）：断点续传（上传也可以续传）

    断点续传 断点续传主要是用在上传或下载文件,一般做法是开始上传的时候,服务器返回上次已经上传的大小,如果上传完成,则返回-1:下载开始的时候,由客户端上报本地已经下载大小,服务器根据位置信息下发数据, ...