java用ajax实现在两个list的级联的局部刷新,该如何处理-Java教程-爱易网页

java用ajax实现在两个list的级联的局部刷新,该如何处理

日期：2014-05-17　浏览次数：20772 次

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获得即可
------解决方案--------------------

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那么就是无刷新页面的，你的列表里面的数据是来自数据库的吧！

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

java用ajax实现在两个list的级联的局部刷新,该如何处理

相关资料更多>

推荐阅读更多>