日期:2014-05-17  浏览次数:20921 次

求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);
                    }