复习了一下JQUERY,做了一个JQUERY 实现的2级别联动,主要联系了一下JQUERY 的ajax功能,代码后台数据写死数据结构和之前我的EXTJS2级联动一样采用JSON 数据传输,代码框架也只直接从EXTJS2级联动代码中复制过来的 算是struts2+jquery +json吧
主要代码介绍
$(function(){
$.ajax({
url: "getlist.action",
type: 'POST',
dataType: 'JSON',
timeout: 5000,
error: function() { alert('Error loading data!'); },
success: function(msg) {
$("#province").empty();
$.each(eval(msg), function(i, item) {
$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#province"));
});
// loadCity($("#province").val());
}
});
$("#province").change(function() {
loadCity($("#province").val());
});
function loadCity(parentid) {
$.ajax({
url: 'getlist2.action?id='+ parentid,
type: 'POST',
dataType: 'JSON',
timeout: 5000,
error: function() { alert('Error loading data!'); },
success: function(msg) {
$("#city").empty();
$.each(eval(msg), function(i, item) {
$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#city"));
});
}
});
}
})
初始化$.ajax 方法调用后台getlist.action 返回省的数据 后写了一个 $("#province").change(function() 事件绑定,省变化后触发loadCity 方法返回市的数据
完整的 test.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>ddd</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: "getlist.action",
type: 'POST',
dataType: 'JSON',
timeout: 5000,
error: function() { alert('Error loading data!'); },
success: function(msg) {
$("#province").empty();
$.each(eval(msg), function(i, item) {
$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#province"));
});
// loadCity($("#province").val());
}
});
$("#province").change(function() {
loadCity($("#province").val());
});
function loadCity(parentid) {
$.ajax({
url: 'getlist2.action?id='+ parentid,
type: 'POST',
dataType: 'JSON',
timeout: 5000,
error: function() { alert('Error loading data!'); },
success: function(msg) {
$("#city").empty();
$.each(eval(msg), function(i, item) {
$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#city"));
});
}
});
}
})
</script>
<body>
<div align="center">
<select id='province'>
<option id="provinceonline" value="">
所有
</option>
</select>
<select id='city'>
<option id="cityonline" value="">
所有
</option>
</select>
</div>
</body>
</html>
效果图
选择某一个城市
选中后看它所在的城市
- 大小: 2.7 KB
- 大小: 3.7 KB
- 大小: 2.2 KB
分享到:
相关推荐
一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
运用jquery写的省市三级联动Demo 简单实用
是一个jquery省市区三级联动,支持默认设置省、市、区,数据很全,调用简单,浏览器兼容很好,需要的下载试试吧
用jquery做的三级联动的树,里面详细写了一个实际的省市县的三级联动。比较简单的内容哦。
java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单
jquery与xml写的城市三级联动,代码简单易懂,可自行维护!
doubleselect.html 博文链接:https://crazymud.iteye.com/blog/413122
JQuery实现无刷新省市三级联动,代码简单易懂
样式、效果很好的JQuery省、省市二级联动、省市县/区三级联动资源,纯前端实现,简单方便
实现“城市菜单联动”超级简单,加载JS文件,调用即可。主要支持以下功能: 1、二级城市城市联动 2、所在地默认选项 3、星座默认选项 4、头像上传 Uploadify 插件 5、jQuery Validate 表单验证
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo,简单易懂,可以参考博客:http://blog.csdn.net/mockingbirds/article/details/46842327
jquery省市区三级联动 可以改成二级联动 使用简单
仅供学习,有兴趣可以看看,高手勿入。代码很简单的。
简单易懂JQuery中国省市区无刷新三级联动查询,兼容性好。
jquery 省市县三级联动 使用jquery 实现几乎全国省市县三级联动效果,无刷新效果,代码简单,易懂
自己整理的,代码精简,功能强大。需要的朋友请自行建立数据库
jquery省市县三级联动的三个例子,总有一个适合你。
以往的项目中都是简单的二级联动一对一或者三级联动一对一,如果想实现三级联动多对多,怎么做呢?本案例为您揭晓答案。
jQuery移动端省市二级联动选择插件基于jquery.1.10.2.min.js制作,支持省市二级联动、二级非联动、单级选择,简单实用,手机触屏操作。