昨天做项目的时候遇到了一个填写地址时选择省市的效果,看到了一个非常好用的 js ,这个是基于jQuery
+ JSON
实现的,文件 jquery.cityselect.js
只有5kb 很小很实用。
html
首先在 <head>
中添加引用 jQuery 和 cityselect 插件。
1
<script src="js/jquery.2.1.4.js" type="text/javascript" charset="utf-8"></script>
2
<script src="js/jquery.cityselect.js" type="text/javascript" charset="utf-8"></script>
接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。
jQuery插件调用
1$(
"#city_1").citySelect({
2 prov:
"湖南",
//省份
3 city:
"长沙",
//城市
4 dist:
"岳麓区",
//区县
5 nodata:
"none",
//当子集无数据时,隐藏select
6 required:
false
7});
当然插件信息也是可以扩展的,可以通过 city.url
来绑定数据,但要一定注意数据格式为 JSON 格式的。
例子:
1$(
"#city").citySelect({
2 url:{
"citylist":[
3 {
"p":
"前端技术",
"c":[{
"n":
"HTML"},{
"n":
"CSS",
"a":[{
"s":
"CSS2.0"},{
"s":
"CSS3.0"}]},
4 {
"n":
"JAVASCIPT"}]},
5 {
"p":
"编程语言",
"c":[{
"n":
"C"},{
"n":
"C++"},{
"n":
"PHP"},{
"n":
"JAVA"}]},
6 {
"p":
"数据库",
"c":[{
"n":
"Mysql"},{
"n":
"SqlServer"},{
"n":
"Oracle"}]},
7 ]},
8 prov:
"",
9 city:
"",
10 dist:
"",
11 nodata:
"none"
12});
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。
1$(
"#city").citySelect({
2 url:
"data.php"
3});