黄聪:基于jQuery+JSON的省市区三级地区联动
查看演示:http://www.helloweba.com/demo/cityselect/
源码下载:http://files.cnblogs.com/files/huangcong/cityselect.rar
省市区联动下拉效果在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" });
黄聪:基于jQuery+JSON的省市区三级地区联动相关推荐
- JQuery+JSON的省市区三级联动效果
html中只要简单的添加以下代码 <p>三级联动</p> <div id="city_4"><select class="pro ...
- 基于jQuery+ashx+.net实现三级栏目联动操作
父级ID可以为空以两个编号为一级 可以添加到第四级 table 字段有ID. name .parentNode. childNode等基本属性 selecet parentNode ,len(c ...
- 使用ajax和json实现省市区三级联动
使用ajax和json实现省市区三级联动 运行效果 HTML部分 <div id="address"><label>家庭住址:</label>& ...
- JQuery+ajax实现省市区三级联动(附:补充代码内容)
省市区三级联动的实现(附:补充代码) 有了下面的代码,别忘了导入需要的jar包,用到的jar包到网上都能找到. 如果觉得不错,就点个赞!谢谢观望!! ## 1.效果图 ## 2.jsp页面,nov ...
- 纯JS省市区三级不联动 数据有更新
// 纯JS省市区三级不联动 // // <?php Yii::app()->clientScript->registerScriptFile( Yii::app()->req ...
- Jquery之全国省市区三级联动(无需访问服务器)
最终效果图 样式修改css select {font-size: 12px;padding: 4px;white-space: normal; vertical-align: top; outline ...
- 省市级联基于jquery+json(转)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 全国省市区三级城市联动下来选项select插件
area.js /* * 全国三级城市联动 js版 */ function Dsy(){this.Items = {}; } Dsy.prototype.add = function(id,iArra ...
- 黄聪:说说JSON和JSONP,也许你会豁然开朗(转)
前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...
- 基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
最新文章
- 小程序navigateBack,子页面传值给父页面
- Socket接收器——Acceptor
- day14--前端HTML、CSS
- NodeJS http服务端获取POST请求数据
- 用户进程与内核进程通信netlink实例
- 快速构建Windows 8风格应用22-MessageDialog
- react-native在windows环境下的项目启动
- mysql和oracle数据库兼容性_oracle数据库兼容mysql的差异写法
- ajax能拿到401axios无法拿到,解决axios.interceptors.response 401 403问题
- 服务器文件传输抓包,Post入门篇 第12课multipart/form-data多部件上传抓包分析过程...
- appfuse mysql_Appfuse学习笔记(1)
- 艺歌点歌系统服务器连接不了,艺歌手机点歌系统歌曲是什么格式
- 分布式高并发下,Actor模型如此优秀
- python简单聊天工具开发
- 用K-means聚类分类不同行业的关税模型
- 安全网络身份认证系统的设计与实现
- cytoscape.js初级篇
- Java识别验证码和图像处理
- 某电商用户行为分析-提升GMV
- python数据内容_炼数成金:Python数据分析内容分享
热门文章
- http://blog.csdn.net/wangyoujin321/article/details/51472606
- MapReduce实现大矩阵乘法
- poj2965--枚举专题 (算法巧妙)
- c语言图灵机算法,图灵机的时间化简概述(3/4)
- mysql不安装在c_MySQL 的模块不能安装的解决方法
- 信息安全收集注意事项
- c语言换行后多空格,关于文件操作,碰到空格就换行
- Undefined variable 'raw_input'pylint(undefined-variable)
- 【转载】一个c程序在执行main函数之前和main之后都做了那些事情
- 平衡的阵容——洛谷——2880——RMQ