Json 基于jQuery+JSON的省市联动效果
2024-10-15 17:56:54
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。
HTML
首先在head中载入jquery库和cityselect插件。
<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即可。
<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
jQuery
调用cityselect插件非常简单,直接调用:
$("#city").citySelect();
自定义参数调用,设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时,隐藏select
});
当然,你还可以扩展,自定义下拉列表选项数据,你可以根据需要设置下拉内容,注意数据格式一定要为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"
});
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
});
更多示例效果请看demo,插件源码下载(含最新省市区数据)
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-188.html
支持本站:如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!
最新文章
- setTimeout和setInterval的区别以及如何写出效率高的倒计时
- JS的prototype
- JavaScript parseInt函数
- 成都app开发:架构一个App需要学会哪些技术呢?
- C++用数组实现的静态队列
- bianwu 哈希表输出到 excel
- HADOOP :: java.lang.ClassNotFoundException: WordCount
- [LeetCode]LRU Cache有个问题,求大神解答【已解决】
- 关于Class.forName(“com.mysql.jdbc.Driver”)--转
- Effective JavaScript :第五章
- PS图片去色
- PLSQL设置细节
- 潭州课堂25班:Ph201805201 tornado 项目 第四课 增加用户注册登录(课堂笔记)
- EasyUI - DataGrid 去右边空白滚动条列
- (转)mysql百万级以上查询优化
- GO language
- ORA-01461的解决过程~~
- 判断PC机大小端
- node(3)MVC代码结构模式moogoDB的学习
- aop注解 事例
热门文章
- UINavigationController和UIScrollView一起使用时导致UIScrollView位置偏移
- Ida双开定位android so文件
- node.js Tools for Visual Studio 介绍
- iOS--通讯录(UITableViewController)
- unity安卓和IOS读写目录
- CYQ.Data 轻量数据层之路 优雅V1.4 现世 附API帮助文档(九)
- First glance in Go
- 挖一挖C#中那些我们不常用的东西之系列(3)——StackTrace,Trim
- 【故障处理】队列等待之enq IV - contention案例
- 0014 Java学习笔记-集合-HashMap集合