jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
一、插件介绍
最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了。
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。
二、插件作者及网址
作者:暂无(请作者看到后联系我403236160@qq.com,好标上你的大名)
官方网址:无
官方DEMO:无
最新版本:日期2012-7-18
三:插件参数
参数名 | 默认值 | 字符类型 | 使用频率 | 释义说明 |
url | js/city.min.js | string | 常用 | 省市数据josn文件路径 |
prov | null | string | 常用 | 默认省份 |
city | null | string | 常用 | 默认城市 |
dist | null | boolean | 常用 | 默认地区(县) |
nodata | null | string | 常用 | 无数据状态 |
required | true | boolean | 常用 | 必选项 |
下载参数文档 http://www.ijquery.cn/demo/cityselect/cityselect.js参数说明.xls
四:插件案例
1、本站案例
a>demo1 http://www.ijquery.cn/demo/cityselect
下载 http://www.ijquery.cn/demo/cityselect/cityselect.zip
如图:
五:最简使用教程
示例:http://www.ijquery.cn/demo/cityselect/simple.html
1、HTML代码
<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
2、JS和CSS代码 ,请注意这里默认需要把城市数据库 city.min.js 放到 jquery.cityselect.js 所在的数据库中,千万不要丢失!
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
<script type="text/javascript">
$(function(){
$("#city").citySelect({
nodata:"none",
required:false
});
});
</script>
为方便可以直接引用绝对地址
这里的city.mini.js的绝对地址在 http://www.ijquery.cn/js/cityselect/city.min.js
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/cityselect/jquery.cityselect.js"></script>
<script type="text/javascript">
$(function(){
$("#city").citySelect({
nodata:"none",
required:false
});
});
</script>
jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果的更多相关文章
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- jquery.validate.js 一个jQuery验证格式控件
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery补充,基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...
- jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuery MiniUI学习网址:http:// ...
- 导入Jquery.min.js时 JQuery 上打红X了
问题解决:右击jquery.min.js——>MyEclipse——>点击Exclude From Validation——>点击Run Validation 即可
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
随机推荐
- Swift App项目总结
最近公司新开了一个项目,由于我的同事的离职,所以就剩我自己了.于是就果断的使用纯纯Swift写了,之前也用过Swift,不过很早了,那时候Swift还不稳定,每次一升级Xcode,Swift升级以后语 ...
- Python的迭代器与生成器
Python中的生成器和迭代器方便好用,但是平时对生成器和迭代器的特性掌握的不是很到位,今天将这方面的知识整理一下. 迭代器 为了更好的理解迭代器和生成,我们需要简单的回顾一下迭代器协议的概念. 迭代 ...
- angular 4使用jquery 第三方插件库
用jBox插件为例子 1,npm install jBox --save 2,找到.angular-cli.json 增加 "../node_modules/jbox/Source/jBo ...
- 6位密码框js
!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content=&quo ...
- vijos1059题解
题目: XC的儿子小XC最喜欢玩的游戏用积木垒漂亮的城堡.城堡是用一些立方体的积木垒成的,城堡的每一层是一块积木.小XC是一个比他爸爸XC还聪明的孩子,他发现垒城堡的时候,如果下面的积木比上面的积木大 ...
- OpenCV3.2 + VS2015环境配置
一.准备工作: (1) 到OpenCV的官网(http://opencv.org/)下载OpenCV3.2 (2) 安装好VS2015. (3) 计算机系统:Win7(Win8, Win1 ...
- 快学Scala之特质
一个Scala类可以继承多个特质(trait), 特质可能会要求使用它们的类支持某个特定特性, 与Java接口不同, Scala特质可以给出这些特质的缺省实现. 要点如下: Scala中类只能继承一个 ...
- 合格的IT人士需要养成的习惯:设置系统还原点
系统还原可帮助您将计算机的系统文件及时还原到早期的还原点.此方法可以在不影响个人文件(比如电子邮件.文档.照片等)的情况下,撤销对计算机的系统更改.有时,安装一个程序或驱动程序会导致对计算机的异常更改 ...
- js字符串与数组的相互转换
一.数组转字符串,通过join()拼接数组元素 var a, b,c; a = new Array(a,b,c,d,e); b = a.join('-'); c = a.join('');consol ...
- HTTP模拟工具【C#/Winform源码】、Json绑定TreeView控件、使用了MetroModernUI、RestSharp、Dapper.Net、Newtonsoft.Json、SmartThreadPool这几个主要开源框架
HTTP模拟工具 开发语言:C#/Winform开发工具:Visual Studio 2017数据库: SQLite使用框架:界面-MetroModernUI Http请 ...