查看演示:http://www.helloweba.com/demo/cityselect/

源码下载:http://files.cnblogs.com/files/huangcong/cityselect.rar

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。

HTML

首先在head中载入jquery库和cityselect插件。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。

<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>

jQuery

调用cityselect插件非常简单,直接调用:

$("#city").citySelect();  

自定义参数调用,设置默认省市区。

$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时,隐藏select
});

当然,你还可以扩展,自定义下拉列表选项数据,你可以根据需要设置下拉内容,注意数据格式一定要为JSON格式。

$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
});

你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。

$("#city").citySelect({
url:"data.php"
});

黄聪:基于jQuery+JSON的省市区三级地区联动的更多相关文章

  1. 基于jQuery+ashx+.net实现三级栏目联动操作

    父级ID可以为空以两个编号为一级 可以添加到第四级 table 字段有ID. name .parentNode. childNode等基本属性  selecet  parentNode  ,len(c ...

  2. jQuery + json 实现省市区三级联动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  4. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  5. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  6. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  7. 基于jQuery+JSON的省市县 二级 三级 联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...

  8. 黄聪:说说JSON和JSONP,也许你会豁然开朗(转)

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  9. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

随机推荐

  1. [宽度优先搜索] HDU 1372 Knight Moves

    Knight Moves Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  2. HDU 2955 01背包(思维)

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  3. Android VideoView播放视频

    今天介绍一下Android的视频播放控件VideoView,下面介绍一下VideoView的使用步骤: 1.在界面布局中定义VideoView组件,或者在程序中创建VideoView组件. 2.调用V ...

  4. AD 10 原理图编译错误

    在编译原理图时,经常会出现以下错误和警告,这里简单的累出一些错误和警告的原因: 1.floating net labels,这个是应为网标防止错误,应该将网标放在I/O或这连线的端点,或者是网标表错了 ...

  5. Swift语言—常量、变量、类型赋值

    常量:常量在作用域内不能被赋值且不会发生改变,只读不写,每个常量都必须有唯一的名字和内存空间:关键字:let   变量:变量在作用区域内可以它的值可以被改变,可读可写可覆盖,每个常量都必须有唯一的名字 ...

  6. int a

    系统编译之后所有的变量都存储到符号表中,并且每个表项被分配一个符号ID,一般也是数字的,可以根据该符号的ID直接访问符号的值内存中的数据都是二进制的,没有ASCII值ASCII只在为便于人的理解,对二 ...

  7. lightoj1030

    //Accepted 1688 KB 0 ms //http://kicd.blog.163.com/blog/static/126961911200910168335852/ //链接里的例子讲的很 ...

  8. What is the PPA and How to do with it ?

    Part of the appeal of Ubuntu is its six-month release cycle. Every six months a new version of the f ...

  9. 如何把TOMCAT 添加到服务中自动启动

    1.配置系统参数: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_51   //本机Jdk的安装路径,已配置相关Java应用的无需再配置. CATALINA_HOM ...

  10. 在maven项目中解决第三方jar包依赖的问题

    在maven项目中,对于那些在maven仓库中不存在的第三方jar,依赖解决通常有如下解决方法: 方法1:直接将jar包拷贝到项目指定目录下,然后在pom文件中指定依赖类型为system,如: < ...