jquery.cityselect.js基于jQuery+JSON的省市-自定义联动效果(转)

原文链接:http://blog.csdn.net/sandkin/article/details/46559403

一、插件介绍

最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了。

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

demo演示地址:

cityselect.js下载地址:

cityselect.js使用方法:

1.在页面当中引用该文件

2.我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。

3.调用cityselect插件非常简单,直接调用:

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

4.自定义参数调用,设置默认省市区。

$("#city").citySelect({

url:"js/city.min.js",

prov:"湖南",//省份

city:"长沙",//城市

dist:"岳麓区",//区县

nodata:"none"//当子集无数据时,隐藏select

});

5.自定义下拉列表选项数据,你可以根据需要设置下拉内容,注意数据格式一定要为JSON格式。

$("#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"

});

6.还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。

$("#city").citySelect({

url:"data.php"

});

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 35,258评论 18赞 399
  • 当我们在页面中填写个人资料中的省市信息时,页面会根据当前用户所在的城市自动选中省市下拉选项;当我们访问某个大型站点...
    jianghu000阅读 6,369评论 2赞 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 16,790评论 4赞 61
  • 浏览一遍目录,选出想读章节。富有创造力的人其人格有一定共同性吗?于是翻开第三章。 创造力要素 某个领域遗传素质 g...
    章鱼狗阅读 261评论 0赞 0
  • 我喜欢用脚去丈量我的世界 沿着一条看不到尽头的路 漫无目的 肆意洒脱 也许在偶然间会偶遇一个分叉口 我可以抛硬币去...
    匿于尘埃阅读 280评论 0赞 1

友情链接更多精彩内容