当前位置: 代码迷 >> Java Web开发 >> 求jsp页中使用Ajax实现多级联动上拉菜单的代码
  详细解决方案

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

热度:8360   发布时间:2013-02-25 21:13:07.0
求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>
  相关解决方案