省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。
HTML
首先在head中载入jquery库和cityselect插件。
1
2
|
<
script
type
=
"text/javascript"
src
"js/jquery.js"
></
script
>
"js/jquery.cityselect.js"
>
|
接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。
1
2
3
4
5
|
div
id
"city"
>
select
class
"prov"
select
>
"city"
disabled
"disabled"
>
"dist"
>
</
div
>
|
jQuery
调用cityselect插件非常简单,直接调用:
1
|
$(
"#city"
).citySelect();
|
自定义参数调用,设置默认省市区。
1
2
3
4
5
6
7
|
).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
|
).citySelect({
url:{
"citylist"
:[
{
"p"
:
"前端技术"
"c"
:[{
"n"
"HTML"
},{
"CSS"
"a"
"s"
"CSS2.0"
"CSS3.0"
}]},
"JAVASCIPT"
""
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。
|