复习了一下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>
?? ??效果图
?
?? ? 选择某一个城市
?
?
?? 选中后看它所在的城市
?
??