Ajax实现三级联动下拉框

jsp的代码：

<% @ page contentType  =   " text/html; charset=GBK "    import = " java.util.*,com.wehave.hyerp.procurement.domain.Cgsqd " %>
<% @ taglib uri = " struts-html "  prefix = " html "   %>
<% @ taglib uri = " struts-logic "  prefix = " logic "   %>
<% @ taglib uri = " struts-bean "  prefix = " bean "   %>
< html >
     < head >
         < title >   </ title >
         < link rel  =   " stylesheet "  type  =   " text/css "  href  =   " ../css/olstyle.css " >     
         < SCRIPT type = " text/javascript " >
        var req;
        window.onload = function() {
        }
        
        function Change_Select()
         {
            var zhi = document.getElementById( ' m_gykfwzlbb_lbbm ' ).value;
            var url = " sqdSelect.go?method=getSkill&id= " + zhi;
             if (zhi == " 0 " ) {
                alert( " 请选择您要察看的信息 " );
                    return ;
            } else {
                 if (window.XMLHttpRequest)
                 {
                    req = new  XMLHttpRequest();
                } else   if (window.ActiveXObject)
                 {
                    req = new  ActiveXObject( " Microsoft.XMLHTTP " );
                }
                
                 if (req)
                 {
                    req.open( " GET " ,url, true );
                    req.onreadystatechange = callback;
                    req.send( null );
                }
            }
        }
        
        function Change_Select2()
         {
            var zhi = document.getElementById( ' m_lbbm_se ' ).value;
             // alert(zhi.substring(0,2));
             if (zhi == " 0 " ) {
                alert( " 请选择您要察看的信息 " );
                    return ;
               }
             if (zhi.substring( 0 , 2 ) == " WY " ) {
                var url = " sqdSelect.go?method=getSkill2&id= " + zhi;
                 if (window.XMLHttpRequest)
                 {
                    req = new  XMLHttpRequest();
                } else   if (window.ActiveXObject)
                 {
                    req = new  ActiveXObject( " Microsoft.XMLHTTP " );
                }
                
                 if (req)
                 {
                    req.open( " GET " ,url, true );
                    req.onreadystatechange = callback2;
                    req.send( null );
                }
            } else {
                parent.topFram.location  = " sqdSelectAll.go?method=getlistAll&id= " + zhi;
            }
        }
        
        function Change_Select3()
         {
            var zhi = document.getElementById( ' m_lbbm_th ' ).value;
             // alert(zhi.substring(0,2));
             if (zhi == " 0 " ) {
                alert( " 请选择您要察看的信息 " );
                    return ;
               } else {
                parent.topFram.location  = " sqdSelectAll.go?method=getlistAll2&id= " + zhi;
            }
        }
        
        function callback()
         {
             if (req.readyState  ==   4 )
             {
                 if (req.status  ==   200 )
                 {
                    parseMessage();
                } else {
                    alert( " Not able to retrieve description " + req.statusText);
                }
            }
        }
        
        function callback2()
         {
             if (req.readyState  ==   4 )
             {
                 if (req.status  ==   200 )
                 {
                    parseMessage2();
                } else {
                    alert( " Not able to retrieve description " + req.statusText);
                }
            }
        }
        
        function parseMessage()
         {
            var xmlDoc = req.responseXML.documentElement;
            var xSel = xmlDoc.getElementsByTagName( ' select ' );
            var select_root = document.getElementById( ' m_lbbm_se ' );
            select_root.options.length = 0 ;
            
             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);
                 try {
                    select_root.add(option);
                } catch (e) {
                }
            }
        }
        
        function parseMessage2()
         {
            var xmlDoc = req.responseXML.documentElement;
            var xSel = xmlDoc.getElementsByTagName( ' select ' );
            var select_root = document.getElementById( ' m_lbbm_th ' );
            select_root.options.length = 0 ;
            
             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);
                 try {
                    select_root.add(option);
                } catch (e) {
                }
            }
        }
        
        
        
     </ SCRIPT >
     </ head >

< body bgcolor  =   " #C8D0D4 " >
     < html:form action = " /cgsqdNewAction.go " >  
     < TABLE  class   =   " cbToolbar "  id  =   " idToolbar "  cellpadding  =   ' 0 '  cellspacing  =   ' 0 ' >
         < TR align  =   " left "  valign  =   " top "   >
             < TD  NOWRAP >& nbsp;物 质类别: & nbsp; & nbsp;
                 < html:select property = " m_gykfwzlbb_lbbm "  onchange = " Change_Select() " >
                     < html:option value = " 0 " > 请选择 </ html:option >
                        < html:options collection = " LbfList "  property = " m_gykfwzlbb_lbbm "  labelProperty = " m_gykfwzlbb_lbmc " />
                 </ html:select >   & nbsp;
                 < html:select property = " m_lbbm_se "  styleId = " m_lbbm_se "  onchange = " Change_Select2() " >
                     < html:option value = " 0 " >& nbsp; & nbsp; & nbsp; </ html:option >
                 </ html:select >
                 < html:select property = " m_lbbm_th "  styleId = " m_lbbm_th "  onchange = " Change_Select3() " >
                     < html:option value = " 0 " >& nbsp; & nbsp; & nbsp; </ html:option >
                 </ html:select >
                
             </ TD >
            
         </ tr >
     </ table >
      </ html:form >
</ body >
</ html >

action中的代码：

/** */ /**
     * 
     * 查询物质编码类别列表操作(一级)
     *  */
     public  ActionForward doSelectWzlb(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res)  {
        HttpSession session  =  req.getSession();
        UserSession userSession  =
            (UserSession) session.getAttribute( " userSession " );
        permission.setUserID(userSession.getUserId());
        permission.setUserName(userSession.getUserName());
        permission.setModuleName( " m_cgsqd " );
        permission.setActionStr( " 'm_select' " );
         if (permissionService.checkUserPermission(permission)) {
             int  updateSign = 0 ;
             try {
                cgsqdService.updateCgsqwzhzb_sqsl();
                updateSign = 1 ;
            } catch (Exception e) {
                e.printStackTrace();
                updateSign = 0 ;
            }
             if (updateSign == 1 ) {
                List LbfList = cgsqdService.treeListWzlb2();
                req.setAttribute( " LbfList " ,LbfList);
                 return  mapping.findForward( " tools " );
            } else {
                 return   null ;
            }
        } else {
             return  mapping.findForward( " failure " );
        }
    }
    
     /** */ /**
     * 
     * 查询物质编码类别列表操作(二级)
     *  */
     public  ActionForward doSelectWzlb1(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res)  {
        HttpSession session  =  req.getSession();
        UserSession userSession  =
            (UserSession) session.getAttribute( " userSession " );
        permission.setUserID(userSession.getUserId());
        permission.setUserName(userSession.getUserName());
        permission.setModuleName( " m_cgsqd " );
        permission.setActionStr( " 'm_select' " );
         if (permissionService.checkUserPermission(permission)) {
             int  updateSign = 0 ;
             try {
                cgsqdService.updateCgsqwzhzb_sqsl();
                updateSign = 1 ;
            } catch (Exception e) {
                e.printStackTrace();
                updateSign = 0 ;
            }
             if (updateSign == 1 ) {
                List LbfList = cgsqdService.treeListWzlb2();
                req.setAttribute( " LbfList " ,LbfList);
                 return  mapping.findForward( " tools1 " );
            } else {
                 return   null ;
            }
        } else {
             return  mapping.findForward( " failure " );
        }
    }
    
     /** */ /**
     * 
     * 查询物质编码类别列表操作(三级)
     *  */
     public  ActionForward getSkill(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res)  {
        HttpSession session  =  req.getSession();
        UserSession userSession  =
            (UserSession) session.getAttribute( " userSession " );
        permission.setUserID(userSession.getUserId());
        permission.setUserName(userSession.getUserName());
        permission.setModuleName( " m_cgsqd " );
        permission.setActionStr( " 'm_select' " );
         if (permissionService.checkUserPermission(permission)) {
            String id = req.getParameter( " id " );
            
            res.setContentType( " text/xml;charset=GBK " );
            res.setHeader( " Cache-Control " , " no-cache " );
            String xml_start = " <?xml version=/ " 1.0 / "  encoding=/ " GBK/ " ?> " ;
            xml_start += " <selects> " ;
            String xml_end = " </selects> " ;
            String xml = " <select><value>0</value><text> 请选择</text></select> " ;
            String m_lbbm_se = "" ;
            String m_lbmc_se = "" ;
            List LbfList = null ;
             if (id.equals( " WY " )) {
                LbfList = cgsqdService.treeListWzlb3_2(id);
            } else {
                LbfList = cgsqdService.treeListWzlb3_1(id);    
            }
            Iterator it = LbfList.iterator();
             while (it.hasNext()) {
                Cgsqd cgsqd = (Cgsqd)it.next();
                m_lbbm_se = cgsqd.getM_gykfwzlbb_lbbm();
                m_lbmc_se = cgsqd.getM_gykfwzlbb_lbmc();
                xml  += " <select><value> " + m_lbbm_se + " </value><text> " + m_lbmc_se + " </text></select> " ;
            }
            String last_xml = xml_start + xml + xml_end;
            logger.debug( " XML是： " + last_xml);
             try   {
                res.getWriter().write(last_xml);
            }   catch  (IOException e)  {
                e.printStackTrace();
            }
             return   null ;
        } else {
             return   null ;
        }
    }

主要代码就这些，去掉一些权限大代码，真正的代码并不多。