java用ajax实现在两个list的级联的局部刷新,该如何处理
日期：2014-05-17 浏览次数：20806 次
java用ajax实现在两个list的级联的局部刷新
如题，例如，有两个多选框，第一个多选框选择一个公司名，下面的多选框的部门就随着公司名称的不同而变化。但是这个变化是局部的，而不是整个页面的刷新。还是菜鸟一只，请各位高手多多指教！最好有代码和注释。多谢多谢！
------解决方案--------------------
用ajax来做吧。
第一框框加上一个onchange事件
在onchange的函数里面，写一个ajax请求，请求后台数据，后台将数据转成json传到前台。
在onchage 的回调函数里面接收到值。 用JS拼装放到第二个框
看看这个例子吧：
http://www.blogjava.net/supercrsky/articles/203698.html
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript" type="text/javascript">
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银"]
];
function getCity(){
var sltProvince=document.form1.province; //获得省份下拉框的对象
var sltCity=document.form1.city; //获得城市下拉框的对象
var provinceCity=city[sltProvince.selectedIndex - 1]; //得到对应省份的城市数组
sltCity.length=1; //清空城市下拉框，仅留提示选项
if(provinceCity!=null){ //将城市数组中的值填充到城市下拉框中
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
}
</script>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" name="form1">
省
<select name="province" onchange="getCity()">
<option value="0">--请选择--</option>
<option value="直辖市">直辖市 </option>
<option value="江苏省">江苏省 </option>
<option value="福建省">福建省 </option>
<option value="广东省">广东省 </option>
<option value="甘肃省">甘肃省 </option>
</select>
城市
<select name="city">
<option value="0">--请选择--</option>
</select>
</FORM>
</BODY>
</HTML>
------解决方案--------------------
直接在进入上面页面的action中，生成数组的串，然后页面上通过jstl获得即可
------解决方案--------------------
如题，例如，有两个多选框，第一个多选框选择一个公司名，下面的多选框的部门就随着公司名称的不同而变化。但是这个变化是局部的，而不是整个页面的刷新。还是菜鸟一只，请各位高手多多指教！最好有代码和注释。多谢多谢！
------解决方案--------------------
用ajax来做吧。
第一框框加上一个onchange事件
在onchange的函数里面，写一个ajax请求，请求后台数据，后台将数据转成json传到前台。
在onchage 的回调函数里面接收到值。 用JS拼装放到第二个框
看看这个例子吧：
http://www.blogjava.net/supercrsky/articles/203698.html
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript" type="text/javascript">
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银"]
];
function getCity(){
var sltProvince=document.form1.province; //获得省份下拉框的对象
var sltCity=document.form1.city; //获得城市下拉框的对象
var provinceCity=city[sltProvince.selectedIndex - 1]; //得到对应省份的城市数组
sltCity.length=1; //清空城市下拉框，仅留提示选项
if(provinceCity!=null){ //将城市数组中的值填充到城市下拉框中
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
}
</script>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" name="form1">
省
<select name="province" onchange="getCity()">
<option value="0">--请选择--</option>
<option value="直辖市">直辖市 </option>
<option value="江苏省">江苏省 </option>
<option value="福建省">福建省 </option>
<option value="广东省">广东省 </option>
<option value="甘肃省">甘肃省 </option>
</select>
城市
<select name="city">
<option value="0">--请选择--</option>
</select>
</FORM>
</BODY>
</HTML>
------解决方案--------------------
直接在进入上面页面的action中，生成数组的串，然后页面上通过jstl获得即可
------解决方案--------------------
- Java code
$(document).ready(function(){
$("#province").change(function(){
var provinceId=$(this).val();
$.ajax({
url:"cascadeAction!showCities.action",
data:{"provinceId":provinceId},
dataType:"json",
type:"post",
success:function(result){
$("#city").empty();
for(var i=0;i<result.json.length;i++){
var str="<option>"+result.json[i].name+"</option>";
$("#city").append(str);
}
}
});
});
});
------解决方案--------------------
既然你使用了AJAX那么就是无刷新页面的，你的列表里面的数据是来自数据库的吧！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
