ajax+struts完成三级联动下拉框

1、jsp页面代码

js 代码

1. <script type=< span="">"text/javascript">   
2.         var req;   
3.         window.οnlοad=function(){   
4.         }   
5.            
6.         function Change_Select()   
7.         {   
8.             var zhi=document.getElementById('select1').value;   
9.             var url="doSelect.do?method=getSelect2&id="+zhi;   
10.             if(zhi=="0"){   
11.                 alert("请选择您要察看的信息");   
12.                    return;   
13.             }else{   
14.                 if(window.XMLHttpRequest)   
15.                 {   
16.                     req=new XMLHttpRequest();   
17.                 }else if(window.ActiveXObject)   
18.                 {   
19.                     req=new ActiveXObject("Microsoft.XMLHTTP");   
20.                 }   
21.                    
22.                 if(req)   
23.                 {   
24.                     req.open("GET",url,true);   
25.                     req.onreadystatechange=callback;   
26.                     req.send(null);   
27.                 }   
28.             }   
29.         }   
30.            
31.         function Change_Select2()   
32.         {   
33.             var zhi=document.getElementById('select2').value;   
34.             //alert(zhi.substring(0,2));   
35.             if(zhi=="0"){   
36.                 alert("请选择您要察看的信息");   
37.                    return;   
38.                }   
39.             if(true){   
40.                 var url="doSelect.do?method=getSelect3&id="+zhi;   
41.                 if(window.XMLHttpRequest)   
42.                 {   
43.                     req=new XMLHttpRequest();   
44.                 }else if(window.ActiveXObject)   
45.                 {   
46.                     req=new ActiveXObject("Microsoft.XMLHTTP");   
47.                 }   
48.                    
49.                 if(req)   
50.                 {   
51.                     req.open("GET",url,true);   
52.                     req.onreadystatechange=callback2;   
53.                     req.send(null);   
54.                 }   
55.             }else{   
56.                 parent.topFram.location ="sqdSelectAll.go?method=getlistAll&id="+zhi;   
57.             }   
58.         }   
59.            
60.         function Change_Select3()   
61.         {   
62.             var zhi=document.getElementById('m_lbbm_th').value;   
63.             //alert(zhi.substring(0,2));   
64.             if(zhi=="0"){   
65.                 alert("请选择您要察看的信息");   
66.                    return;   
67.                }else{   
68.                 parent.topFram.location ="sqdSelectAll.go?method=getlistAll2&id="+zhi;   
69.             }   
70.         }   
71.            
72.         function callback()   
73.         {   
74.             if(req.readyState == 4)   
75.             {   
76.                 if(req.status == 200)   
77.                 {   
78.                     parseMessage();   
79.                 }else{   
80.                     alert("Not able to retrieve description"+req.statusText);   
81.                 }   
82.             }   
83.         }   
84.            
85.         function callback2()   
86.         {   
87.             if(req.readyState == 4)   
88.             {   
89.                 if(req.status == 200)   
90.                 {   
91.                     parseMessage2();   
92.                 }else{   
93.                     alert("Not able to retrieve description"+req.statusText);   
94.                 }   
95.             }   
96.         }   
97. function parseMessage()   
98.         {   
99.             var xmlDoc=req.responseXML.documentElement;   
100.             var xSel=xmlDoc.getElementsByTagName('select');   
101.             var select_root=document.getElementById('select2');   
102.             select_root.options.length=0;   
103.                
104.             for(var i=0;i<xsel.length;i++)   <="" span="">
105.             {   
106.                 var xValue=xSel[i].childNodes[0].firstChild.nodeValue;   
107.                 var xText=xSel[i].childNodes[1].firstChild.nodeValue;   
108.                 var option=new Option(xText,xValue);   
109.                 try{   
110.                     select_root.add(option);   
111.                 }catch(e){   
112.                 }   
113.             }   
114.         }   
115.            
116.         function parseMessage2()   
117.         {   
118.             var xmlDoc=req.responseXML.documentElement;   
119.             var xSel=xmlDoc.getElementsByTagName('select');   
120.             var select_root=document.getElementById('select3');   
121.             select_root.options.length=0;   
122.                
123.             for(var i=0;i<xsel.length;i++)   <="" span="">
124.             {   
125.                 var xValue=xSel[i].childNodes[0].firstChild.nodeValue;   
126.                 var xText=xSel[i].childNodes[1].firstChild.nodeValue;   
127.                 var option=new Option(xText,xValue);   
128.                 try{   
129.                     select_root.add(option);   
130.                 }catch(e){   
131.                 }   
132.             }   
133.         }                           
134.     </script>  
     2、html代码
135.    

 

xml 代码

1. <html:form action="/doSelect.do"  >    
2.     <TABLE class = "cbToolbar" id = "idToolbar" cellpadding = '0' cellspacing = '0'>  
3.         <TR align = "left" valign = "top" >  
4.             <TD  NOWRAP> 物质类别:     
5.                 <html:select  property="select1" onchange="Change_Select()">  
6.                     <html:option value="0">请选择html:option>  
7.                        <html:options collection="list1" property="typId" labelProperty="typName"/>  
8.                 html:select>     
9.                    
10.                    
11.                 <html:select property="select2" styleId="m_lbbm_se" onchange="Change_Select2()">  
12.                     <html:option value="0">   html:option>  
13.                 html:select>  
14.                 <html:select property="select3" styleId="m_lbbm_th" onchange="Change_Select3()">  
15.                     <html:option value="0">   html:option>  
16.                 html:select>  
17.   
18.             TD>  
19.                
20.         tr>  
21.     table>  
22.      html:form>   

 

3、控制器源码

java 代码

1. public ActionForward list1(   
2.   ActionMapping mapping,   
3.   ActionForm form,   
4.   HttpServletRequest request,   
5.   HttpServletResponse response) {   
6.   
7.   String lan = (String)request.getSession().getAttribute("languageType");   
8.   if(lan==null)lan ="1";    
9.      
10.   String HQL = "from Type t where t.typLang= :lang  and t.leve=:leve order by t.typOrder";   
11.   Query query = dao.getHQLQuery(HQL);   
12.   query.setString("lang",lan);   
13.   query.setInteger("leve",2);   
14.      
15.   List types = query.list();   
16.   request.setAttribute("list1",types);   
17.   return mapping.findForward("list");   
18.  }   
19.   
20.     
21.     
22.  public ActionForward getSelect2(   
23.    ActionMapping mapping,   
24.    ActionForm form,   
25.    HttpServletRequest request,   
26.    HttpServletResponse response) {   
27.      
28.   String lan = (String)request.getSession().getAttribute("languageType");   
29.   if(lan==null)lan ="1";    
30.      
31.   String id=request.getParameter("id");   
32.            
33.   response.setContentType("text/xml;charset=UTF-8");   
34.   response.setHeader("Cache-Control","no-cache");   
35.         String xml_start="<?xml version=\"1.0\" encoding=\"UTF-8\"?>";   
36.         xml_start+="<selects>";   
37.         String xml_end="</selects>";   
38.         String xml="<select><value>"+"0"+"</value><text>"+"select"+"</text></select>";   
39.         String m_lbbm_se="";   
40.         String m_lbmc_se="";   
41.         List LbfList=null;   
42.           
43.         LbfList=getList(3,lan,new Integer(id).intValue());   
44.           
45.         Iterator it=LbfList.iterator();   
46.         while(it.hasNext()){   
47.             Type cgsqd=(Type)it.next();   
48.             m_lbbm_se=cgsqd.getTypId().toString();   
49.             m_lbmc_se=cgsqd.getTypName();   
50.             xml +="<select><value>"+m_lbbm_se+"</value><text>"+m_lbmc_se+"</text></select>";   
51.         }   
52.         String last_xml=xml_start+xml+xml_end;   
53.         try {   
54.          System.out.println(last_xml);   
55.          response.getWriter().write(last_xml);   
56.         } catch (IOException e) {   
57.             e.printStackTrace();   
58.         }   
59.         return null;   
60.   
61.   }   
62.     
63.  public ActionForward getSelect3(   
64.    ActionMapping mapping,   
65.    ActionForm form,   
66.    HttpServletRequest request,   
67.    HttpServletResponse response) {   
68.   
69.   String lan = (String)request.getSession().getAttribute("languageType");   
70.   if(lan==null)lan ="1";    
71.      
72.   String id=request.getParameter("id");   
73.            
74.   response.setContentType("text/xml;charset=UTF-8");   
75.   response.setHeader("Cache-Control","no-cache");   
76.         String xml_start="<?xml version=\"1.0\" encoding=\"UTF-8\"?>";   
77.         xml_start+="<selects>";   
78.         String xml_end="</selects>";   
79.         String xml="<select><value>"+"0"+"</value><text>"+"select"+"</text></select>";   
80.         String m_lbbm_se="";   
81.         String m_lbmc_se="";   
82.         List LbfList=null;   
83.           
84.         LbfList=getList_product(lan,new Integer(id).intValue());   
85.           
86.         Iterator it=LbfList.iterator();   
87.         while(it.hasNext()){   
88.             Product cgsqd=(Product)it.next();   
89.             m_lbbm_se=cgsqd.getProId().toString();   
90.             m_lbmc_se=cgsqd.getProName();   
91.             xml +="<select><value>"+m_lbbm_se+"</value><text>"+m_lbmc_se+"</text></select>";   
92.         }   
93.         String last_xml=xml_start+xml+xml_end;   
94.         try {   
95.          System.out.println(last_xml);   
96.          response.getWriter().write(last_xml);   
97.         } catch (IOException e) {   
98.             e.printStackTrace();   
99.         }   
100.         return null;   
101.   
102.   }   
103.     
104.     
105.  private List getList(int lb,String lan,int parent_id){   
106.      
107.   String HQL = "from Type t where t.typLang= :lang  and t.leve=:leve and t.type.typId=:pid order by t.typOrder";   
108.   Query query = dao.getHQLQuery(HQL);   
109.   query.setString("lang",lan);   
110.   query.setInteger("leve",lb);   
111.   query.setInteger("pid",parent_id);   
112.      
113.   List types = query.list();   
114.   return types;   
115.  }   
116.     
117. private List getList_product(String lan,int typeid){   
118.      
119.   String HQL = "from Product p where p.proLang= :lang   and p.type.typId=:typeid order by p.proOrder";   
120.   Query query = dao.getHQLQuery(HQL);   
121.   query.setString("lang",lan);   
122.   query.setInteger("typeid",typeid);   
123.      
124.   List lists = query.list();   
125.   return lists;   
126.  }