省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。
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" }]},
]},
prov: "" ,
city: "" ,
dist: "" ,
nodata: "none" }); |
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。
1 2 3 | $( "#city" ).citySelect({
url: "data.php" }); |
更多示例效果请看demo,插件×××(含最新省市区数据)