省市区联动下拉效果在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
>
|