Jquery Ajax 提交 级联实现

页面代码：

显示代码打印
1 <div> 

2     

3       省份：<select id="province"> 

4            <option value="">请选择省份</option> 

5         </select> 

6       城市：<select id="city"> 

7         <option value="">请选择城市</option> 

8         </select> 

9 </div>
级联菜单js代码

显示代码打印
01 $(document).ready(function(){  

02 var province=$("#province");  

03 var city=$("#city");  

04 var provinceurl="/Struts2/base/selectProvince.action";  

05 $.post(provinceurl,{code:"province"},function(data){  

06     var dataObj=eval("("+data+")");  

07     $.each(dataObj,function(index,item){  

08     var tempOption = document.createElement("option");  

09     tempOption.value = item.provinceId;  

10     tempOption.innerHTML  = item.provinceName;  

11     province.append(tempOption);  

12     });  

13 },"json");  

14   

15 province.change(function(){  

16   city.empty();  

17   var params={provinceCode:$('#province option:selected').val()};  

18   $.post("/Struts2/base/selectCity.action",params,function(data){  

19   alert(data);  

20   var dataObj=eval("("+data+")"); //转换为json对象 

21     $.each(dataObj,function(index,item){  

22     var tempOption = document.createElement("option");  

23     tempOption.value = item.cityId;  

24     tempOption.innerHTML  = item.cityName;  

25     city.append(tempOption);  

26     });  

27   },"json");  

28 });  

29 });
 

 

对应的Action代码：

显示代码打印
01 package com.hyts.business.action; 

02   

03 import java.util.List; 

04   

05 import javax.servlet.http.HttpServletRequest; 

06   

07 import net.sf.json.JSONArray; 

08   

09 import com.hyts.dao.ProvinceDAO; 

10 import com.hyts.model.City; 

11 import com.hyts.model.Province; 

12 import com.opensymphony.xwork2.ActionSupport; 

13   

14 public class ChainSelectAction extends ActionSupport { 

15   

16  private static final long serialVersionUID = 1383189653446960523L; 

17  private HttpServletRequest request; 

18  private String result;//前台接收数据 

19  private String provinceCode; 

20  public String selectProvince()  { 

21   ProvinceDAO provinceDAO=new ProvinceDAO(); 

22   List<Province> list=provinceDAO.getAllProvince(); 

23   JSONArray jsonArray2 = JSONArray.fromObject( list );               

24   this.result=jsonArray2.toString(); 

25   return SUCCESS; 

26  } 

27   

28  public String selectCity() throws Exception{ 

29   ProvinceDAO provinceDAO=new ProvinceDAO(); 

30   System.out.println(this.provinceCode); 

31   int provinceId=Integer.parseInt(this.provinceCode); 

32   List<City> list=provinceDAO.getCityByProvince(provinceId); 

33   for(int i=0;i<list.size();i++) 

34   { 

35    City city=list.get(i); 

36    System.out.println(city.getCityName()); 

37   } 

38   JSONArray jsonArray = JSONArray.fromObject( list ); 

39   this.result=jsonArray.toString(); 

40   return SUCCESS; 

41  } 

42  public String getResult() { 

43   return result; 

44  } 

45   

46  public void setResult(String result) { 

47   this.result = result; 

48  } 

49    

50  public String getProvinceCode() { 

51   return provinceCode; 

52  } 

53   

54  public void setProvinceCode(String provinceCode) { 

55   this.provinceCode = provinceCode; 

56  } 

57   

58  public void setServletRequest(HttpServletRequest request) { 

59   this.request=request; 

60  } 

61 }
 

 

对应的配置文件

显示代码打印01 <?xml version="1.0" encoding="UTF-8" ?> 

02 <!DOCTYPE struts PUBLIC 

03     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 

04     "http://struts.apache.org/dtds/struts-2.0.dtd"> 

05   

06 <struts> 

07   <include file="struts-default.xml"/> 

08   <package name="/base" extends="json-default" namespace="/base"> 

09   <action name="selectProvince" class="com.hyts.business.action.ChainSelectAction" method="selectProvince"> 

10            <result type="json"> 

11               <param name="root">result</param> 

12            </result> 

13   </action> 

14     

15   <action name="selectCity" class="com.hyts.business.action.ChainSelectAction" method="selectCity"> 

16            <result type="json"> 

17               <param name="root">result</param> 

18            </result> 

19   </action> 

20  </package> 

21 </struts>