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

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 >

  1    < script language = " javascript "  type = " text/javascript " >
  2        var  xmlHttp;
  3       
  4        function  createXMLHttpRequest() {
  5            if  (window.ActiveXObject) {
  6                xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
  7           } else   if (window.XMLHttpRequest) {
  8                xmlHttp  =   new  XMLHttpRequest();
  9           }
 10       }
 11       
 12        // 查询指定页面
 13        function  selectChangeListener(orgLevel,orgId) {
 14       
 15         createXMLHttpRequest();
 16       
 17          var  url =   " <%=request.getContextPath()%>/dreportAction.do?method=getOrganinfo_ajax&orgLevel= " + orgLevel + " &orgId= " + orgId;
 18         xmlHttp.open( " get " ,url, true );
 19          if (orgLevel  ==  ' 2 ') {
 20              // 如果是选择默认的第一个，则是清空后面3级机构和4级机构。
 21              var  tempSel  =  document.getElementById( " secOrganIdSel " );
 22              if (tempSel.options[tempSel.selectedIndex].value  ==   - 1 ) {
 23                  var  tempSel_1  =  document.getElementById( " thdOrganIdSel " );
 24                   tempSel_1.options.length  =   1 ;
 25                    var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
 26                   tempSel_2.options.length  =   1 ;
 27                    return   false ;
 28             }
 29             xmlHttp.onreadystatechange  =  callback2;
 30         } else   if (orgLevel  ==  ' 3 ') {
 31              // 如果三级机构默认的是第一个选项，则清空第4级机构
 32             
 33              var  tempSel  =  document.getElementById( " thdOrganIdSel " );
 34              if (tempSel.options[tempSel.selectedIndex].value  ==   - 1 ) {
 35                  var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
 36                   tempSel_2.options.length  =   1 ;
 37                  return   false ;
 38             }
 39             xmlHttp.onreadystatechange  =  callback3;
 40         }
 41         
 42         xmlHttp.send( null );
 43      }
 44      
 45       // 返回信息处理,二级机构下拉列表返回结果
 46       function  callback2() {
 47          if  (xmlHttp.readyState  ==   4 )  { 
 48            if  (xmlHttp.status  ==   200 )  { 
 49                var  xmlDoc  =  xmlHttp.responseXML;
 50               changeSel(' 2 ',xmlDoc);
 51           } else {
 52                 window.alert( " 您所请求的页面有异常。 " );
 53           }
 54         }           
 55      }
 56      
 57      
 58       // 返回信息处理,三级机构下拉列表返回结果
 59       function  callback3() {
 60          if  (xmlHttp.readyState  ==   4 )  { 
 61            if  (xmlHttp.status  ==   200 )  { 
 62                var  xmlDoc  =  xmlHttp.responseXML;
 63               changeSel(' 3 ',xmlDoc);
 64           } else {
 65                 window.alert( " 您所请求的页面有异常。 " );
 66           }
 67         }           
 68      }
 69      
 70       // 更新机构下拉列表
 71       function  changeSel(orgLevel,xmlDoc) {
 72      
 73            // var xsel = xmlDoc.getElementsByTagName('kkk');
 74            var  xsel  =  xmlDoc.documentElement.childNodes;
 75
 76            // alert(xsel.length);
 77            if (orgLevel  ==  ' 2 ') {
 78                // 二级机构,3级机构和4级机构需要清空。
 79                var  tempSel_1  =  document.getElementById( " thdOrganIdSel " );
 80               tempSel_1.options.length  =   0 ;
 81               tempSel_1.add( new  Option('请选择机构',' - 1 '))
 82                var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
 83               tempSel_2.options.length  =   0 ;
 84               tempSel_2.add( new  Option('请选择机构',' - 1 '))
 85               
 86                for ( var  i  =   0 ; i  <  xsel.length;i ++ ) {
 87                    var  xvalue  =  xsel[i].childNodes[ 0 ].firstChild.nodeValue;
 88                    var  xtext  =   xsel[i].childNodes[ 1 ].firstChild.nodeValue;
 89                    var  option  =   new  Option(xtext,xvalue);
 90                   tempSel_1.add(option);
 91               }
 92               
 93           } else   if (orgLevel  ==  ' 3 ') {
 94                // 三级机构，四级机构需要清空
 95
 96                var  tempSel_2  =  document.getElementById( " forthOrganIdSel " );
 97               tempSel_2.options.length  =   0 ;
 98               tempSel_2.add( new  Option('请选择机构',' - 1 '))
 99               
100                 for ( var  i  =   0 ; i  <  xsel.length;i ++ ) {
101                    var  xvalue  =  xsel[i].childNodes[ 0 ].firstChild.nodeValue;
102                    var  xtext  =   xsel[i].childNodes[ 1 ].firstChild.nodeValue;
103                    var  option  =   new  Option(xtext,xvalue);
104                   tempSel_2.add(option);
105               }
106               
107           }
108          
109      }
110
111
112   </ script >