【开源】jquery省市区插件

该博客介绍了一个jQuery城市选择插件,展示了演示地址。其动画效果用animate.css,支持选择和键盘输入,服务端返回json格式。还说明了使用方法,包括引用css和js资源及给出使用示例,并提醒转载标注原文地址。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先来张效果图,演示地址: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).使用示例

 1 <script>
 2     $(function () {
 3         $('#txt_city').jcity({
 4             urlOrData: '/js/citydata.json',
 5             animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' },  // 需要第一步引用的animate.min.css文件,也可以自己定义动画 
 6             onChoice: function (data) {
 7                 console.log(data);
 8             }
 9         });
10     });
11 </script>

 

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

转载于:https://www.cnblogs.com/JasonLong/p/5278955.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值