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

20130308101729996.jpg

HTML

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

1
2
< 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即可。
1
2
3
4
5
< div id = "city" >
< select class = "prov" ></ select >
< select class = "city" disabled = "disabled" ></ select >
< select class = "dist" disabled = "disabled" ></ select >
</ div >
jQuery

调用cityselect插件非常简单，直接调用：

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

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

1
2
3
4
5
6
7
$( "#city" ).citySelect({
url: "js/city.min.js" ,
prov: "湖南" , //省份
city: "长沙" , //城市
dist: "岳麓区" , //区县
nodata: "none" //当子集无数据时，隐藏select
}); 
当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。
01
02
03
04
05
06
07
08
09
10
11
12
$( "#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参数指向后台地址也能实现无刷新联动效果。
1
2
3
$( "#city" ).citySelect({
url: "data.php"
}); 
更多示例效果请看demo，插件×××（含最新省市区数据）