ajax+struts实现多级下拉列表联动，无刷新

public   ActionForward getOrganinfo_ajax(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)  {
        String level2OrganId   =  request.getParameter( " level2OrganId " );
        System.out.print(level2OrganId);
        IDReportLogic dreportLogic  =  (IDReportLogic)SpringFactory.getBeanFactory().getBean( " dreportLogic " );
       
        response.setContentType( " text/xml;charset=UTF-8 " );
        response.setHeader( " Cache-control " ,  " no-cache " );

         try {
           
            String orgLevel  =  request.getParameter( " orgLevel " );
            String orgId  =  request.getParameter( " orgId " );
           
           

/**/ /*
以下为前台当中接受到的xml结构。

            StringBuffer sb = new StringBuffer();
            sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
            String str="<select><kkk><value>11111</value><text>北京</text></kkk>";
            String str2="<kkk><value>3333</value><text>上海</text></kkk></select>";
            sb.append(str);
            sb.append(str2); */
           
            PrintWriter out  =  response.getWriter();
            out.write(str);
            out.flush();
             return   null ;
        }   catch  (Exception e)  {
             //  TODO 自动生成 catch 块
            request.setAttribute( " info " ,  " 获取二级机构异常！ " );
            e.printStackTrace();
             return  mapping.getInputForward();
        }
       
    }





二级机构：

                     
                   < select name = " secOrganIdSel "  id = " secOrganIdSel "
                  onchange = " selectChangeListener('2',this.options[this.selectedIndex].value); " >
                       < option value = " -1 " > 请选择机构.. </ option >
</ select >

    三级机构：
                   < select name = " thdOrganIdSel "  id = " thdOrganIdSel "
                  onchange = " selectChangeListener('3',this.options[this.selectedIndex].value); " >
                       < option value = " -1 " > 请选择机构.. </ option >

</ select >

四级机构：
                   < select name = " forthOrganIdSel " >
                       < option value = " -1 " > 请选择机构.. </ option >
                   </ select >

    < script language = " javascript "  type = " text/javascript " >
        var  xmlHttp;
      
        function  createXMLHttpRequest() {
            if  (window.ActiveXObject) {
                xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
           } else   if (window.XMLHttpRequest) {
                xmlHttp  =   new  XMLHttpRequest();
           }
       }
      
        // 查询指定页面
        function  selectChangeListener(orgLevel,orgId) {
      
         createXMLHttpRequest();
      
          var  url =   " <%=request.getContextPath()%>/dreportAction.do?method=getOrganinfo_ajax&orgLevel= " + orgLevel + " &orgId= " + orgId;
         xmlHttp.open( " get " ,url, true );
          if (orgLevel  ==  ' 2 ') {
              // 如果是选择默认的第一个，则是清空后面3级机构和4级机构。
              var  tempSel  =  document.getElementById( " secOrganIdSel " );
              if (tempSel.options[tempSel.selectedIndex].value  ==   - 1 ) {
                  var  tempSel_1  =  document.getElementById( " thdOrganIdSel " );
                   tempSel_1.options.length  =   1 ;
                var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
                   tempSel_2.options.length  =   1 ;
                    return   false ;
             }
             xmlHttp.onreadystatechange  =  callback2;
         } else   if (orgLevel  ==  ' 3 ') {
              // 如果三级机构默认的是第一个选项，则清空第4级机构
            
              var  tempSel  =  document.getElementById( " thdOrganIdSel " );
              if (tempSel.options[tempSel.selectedIndex].value  ==   - 1 ) {
               var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
                   tempSel_2.options.length  =   1 ;
                  return   false ;
             }
             xmlHttp.onreadystatechange  =  callback3;
         }
        
         xmlHttp.send( null );
      }
     
       // 返回信息处理,二级机构下拉列表返回结果
       function  callback2() {
          if  (xmlHttp.readyState  ==   4 )  {
            if  (xmlHttp.status  ==   200 )  {
                var  xmlDoc  =  xmlHttp.responseXML;
               changeSel(' 2 ',xmlDoc);
           } else {
                 window.alert( " 您所请求的页面有异常。 " );
           }
         }          
      }
     
     
       // 返回信息处理,三级机构下拉列表返回结果
       function  callback3() {
          if  (xmlHttp.readyState  ==   4 )  {
            if  (xmlHttp.status  ==   200 )  {
                var  xmlDoc  =  xmlHttp.responseXML;
               changeSel(' 3 ',xmlDoc);
           } else {
                 window.alert( " 您所请求的页面有异常。 " );
           }
         }          
      }
     
       // 更新机构下拉列表
       function  changeSel(orgLevel,xmlDoc) {
     
            // var xsel = xmlDoc.getElementsByTagName('kkk');
            var  xsel  =  xmlDoc.documentElement.childNodes;

            // alert(xsel.length);
            if (orgLevel  ==  ' 2 ') {
                // 二级机构,3级机构和4级机构需要清空。
                var  tempSel_1  =  document.getElementById( " thdOrganIdSel " );
               tempSel_1.options.length  =   0 ;
               tempSel_1.add( new  Option('请选择机构',' - 1 '))
                var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
               tempSel_2.options.length  =   0 ;
               tempSel_2.add( new  Option('请选择机构',' - 1 '))
              
                for ( var  i  =   0 ; i  <  xsel.length;i ++ ) {
                    var  xvalue  =  xsel[i].childNodes[ 0 ].firstChild.nodeValue;
                   var  xtext  =   xsel[i].childNodes[ 1 ].firstChild.nodeValue;
                    var  option  =   new  Option(xtext,xvalue);
                  tempSel_1.add(option);
               }
              
          } else   if (orgLevel  ==  ' 3 ') {
               // 三级机构，四级机构需要清空

                var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
             tempSel_2.options.length  =   0 ;
              tempSel_2.add( new  Option('请选择机构',' - 1 '))
             
                 for ( var  i  =   0 ; i  <  xsel.length;i ++ ) {
                   var  xvalue  =  xsel[i].childNodes[ 0 ].firstChild.nodeValue;
                   var  xtext  =   xsel[i].childNodes[ 1 ].firstChild.nodeValue;
                   var  option  =   new  Option(xtext,xvalue);
                  tempSel_2.add(option);
              }
              
          }
         
    }
   </ script >

评论

2 楼 306781704 2009-02-20  

看了几遍终于看明白了，就是布局不清晰，内容还可以

1 楼 306781704 2009-02-20  

条理不清晰，代码也没全部贴出来