读书人

求jsp页中使用Ajax实现多级联动上拉菜

发布时间: 2012-09-14 11:53:44 作者: rapoo

求jsp页中使用Ajax实现多级联动下拉菜单的代码
如题,比如我有一个需要显示国家,省市,城市三个选项的下拉菜单

如何来实现这个三级联动?

请擅长web开发的高手指点!

[解决办法]
随便下载一个ajax框架,可能示例程序里面就有,这个代码很普通,网上随便找一下能够找到很多。
[解决办法]
如果只是国家省市城市的话没必要ajax
js就可以搞定了
随便百度搜下一大把
[解决办法]
用dwr来实现,比较容易啊!
呵呵!
[解决办法]
dwr首选,清晰,明了,简便。
[解决办法]

Java code
<script type="text/javascript">    var xmlRequest = null;    function startRequest1(url) {        if(window.ActiveXObject){              xmlRequest=new ActiveXObject("Microsoft.XMLHTTP");          }else if(window.XMLHttpRequest){              xmlRequest=new XMLHttpRequest();          }        xmlRequest.onreadystatechange = getSelect1;        xmlRequest.open("get",url,true);        xmlRequest.send(null);    }        function startRequest2(url) {        if(window.ActiveXObject){              xmlRequest=new ActiveXObject("Microsoft.XMLHTTP");          }else if(window.XMLHttpRequest){              xmlRequest=new XMLHttpRequest();          }        xmlRequest.onreadystatechange = getSelect2;        xmlRequest.open("get",url,true);        xmlRequest.send(null);    }        function startRequest3(url) {        if(window.ActiveXObject){              xmlRequest=new ActiveXObject("Microsoft.XMLHTTP");          }else if(window.XMLHttpRequest){              xmlRequest=new XMLHttpRequest();          }        xmlRequest.onreadystatechange = getSelect3;        xmlRequest.open("get",url,true);        xmlRequest.send(null);    }    //一级联动    function getSelect1() {         if (xmlRequest.readyState == 4){             if (xmlRequest.status == 200){                    var xmlDoc=xmlRequest.responseXML;                    var s2=document.getElementById("organSecond");                    var tag=xmlDoc.getElementsByTagName("organSecond");                    for(var j=s2.length;j>=0;j--){                        s2.options.remove(i);                    }                    for(var i=0;i<tag.length;i++){                        var id=tag[i].childNodes[0].childNodes[0].nodeValue;                        var va=tag[i].childNodes[1].childNodes[0].nodeValue;                        var op=new Option(va,id);                        s2.options.add(op);                     }                       select2();             }        }       }   //二级联动   function getSelect2() {         if (xmlRequest.readyState == 4){             if (xmlRequest.status == 200){                    var xmlDoc=xmlRequest.responseXML;                    var s3=document.getElementById("organThird");                    var tag=xmlDoc.getElementsByTagName("organThird");                    for(var j=s3.length;j>=0;j--){                        s3.options.remove(i);                    }                    for(var i=0;i<tag.length;i++){                        var id=tag[i].childNodes[0].childNodes[0].nodeValue;                        var va=tag[i].childNodes[1].childNodes[0].nodeValue;                        var op=new Option(va,id);                        s3.options.add(op);                     }                      }        }      }      function getSelect3() {         if (xmlRequest.readyState == 4){             if (xmlRequest.status == 200){                    var xmlDoc=xmlRequest.responseXML;                    var s4=document.getElementById("positionName");                    var tag=xmlDoc.getElementsByTagName("positionName");                    for(var j=s4.length;j>=0;j--){                        s4.options.remove(i);                    }                    for(var i=0;i<tag.length;i++){                        var id=tag[i].childNodes[0].childNodes[0].nodeValue;                        var va=tag[i].childNodes[1].childNodes[0].nodeValue;                        var op=new Option(va,id);                        s4.options.add(op);                     }                      }        }       }      function select1(){           var id = document.getElementById("organFirst").value;           var url= "<%=request.getContextPath()%>/servlet/Second?id="+id+"&date="+(new Date().toString());           startRequest1(url);   }      function select2(){           var id = document.getElementById("organSecond").value;           var url= "<%=request.getContextPath()%>/servlet/Third?id="+id+"&date="+(new Date().toString());           startRequest2(url);   }      function select3(){           var id = document.getElementById("positionSort").value;           var url= "<%=request.getContextPath()%>/servlet/Position?id="+id+"&date="+(new Date().toString());           startRequest3(url);   }</script> 


[解决办法]
LS代码好多啊,国家省市的三级级联需要用ajax,用JS就搞定了
[解决办法]
把后台数据对象设计好(对应数据库表中的主外键关系,或者在代码中体现从属关系),实现相应的查询方法。

在jsp页面,使用DWRUtil.removeAllOptions()和DWRUtil.addOptions()两个方法就可以简单实现。

读书人网 >Java Web开发

热点推荐