先来张效果图，演示地址：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. Django---MVC设计模式

    把数据存储逻辑.业务逻辑和表现逻辑组合在一起的概念被称为软件架构的 Model-View-Controller (MVC)模式. 在这个模式中, Model 代表数据存层,View 代表的是系统中选择 ...

  2. [GraphQL] Create an Input Object Type for Complex Mutations

    When we have certain mutations that require more complex input parameters, we can leverage the Input ...

  3. [Most.js] Create Streams From Single Values With Most.js

    Most provides many means for creating streams, the simplest of which is the offunction. In this less ...

  4. Python 网络爬虫与信息获取（一）—— requests 库的网络爬虫

    1. 安装与测试 进入 cmd(以管理员权限),使用 pip 工具,pip install requests 进行安装: 基本用法: >> import requests >> ...

  5. Git之同一台电脑如何连接多个远程仓库

    Git之同一台电脑如何连接多个远程仓库 一.总结 一句话总结: 1.git使用.git目录里面的内容(ssh或用户名密码)来自动和远程仓库通信 2.在不同的仓库中配置不同的.git目录,可以连接不同的 ...

  6. 5.7-GTID复制搭建

    基本环境   Master Slave MySQL版本 MySQL-5.7.16-X86_64 MySQL-5.7.16-X86_64 IP 192.168.56.156 192.168.56.157 ...

  7. 关于Boolean类型做为同步锁异常问题

    public class Test2 { private static volatile Boolean aBoolean = true; static class A implements Runn ...

  8. Python应用库大全总结

    学python,想必大家都是从爬虫开始的吧.毕竟网上类似的资源很丰富,开源项目也非常多. python学习网络爬虫主要分3个大的版块:抓取,分析,存储 当我们在浏览器中输入一个url后回车,后台会发生 ...

  9. 在视图上创建ListCtrl的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天介绍下如何在一个视图上动态创建一个ListCtrl. 1.新建一个MFC的单文档工程,这里暂定名字为ListDem ...

  10. CodeBlocks 配色方案设置

    最终效果(官方sublime修改版) 官方配色 codeblocks是一个功能很强大编程软件,我们在安装codeblocks后软件默认的是白底黑字界面,这种界面在长时间写代码时会对眼睛造成很大伤害,增 ...