Struts2 +json+ jquery 实现三级联动

action代码view plaincopy to clipboardprint?1. p ublic class BindAction extends BaseAction{2.3.4. public String bindPro(){5. List<TDictProvince>list=this.loanInfoService.getProlist();6. if(list.size()>0){7. StringBuilder sb= new StringBuilder();8. int size=list.size();9. sb.append("[");10. for (TDictProvince pro : list) {11. size--;12. sb.append("{provinceid:/"");13. sb.append(pro.getProvinceid());14. sb.append("/",provincename:/"");15. sb.append(pro.getProvincename());16. sb.append("/"}");17. if(size>0){18. sb.append(",");19. }20. }21. sb.append("]");22. proString=sb.toString();23.24. }25. return SUCCESS;26. }27. public String bindCit() {28. List<TDictCity>list=this.loanInfoService.getCitylistByProId(proId);29. if(list.size()>0){30. StringBuilder sb= new StringBuilder();31. int size=list.size();32. sb.append("[");33. for (TDictCity pro : list) {34. size--;35. sb.append("{cityid:/"");36. sb.append(pro.getCityid());37. sb.append("/",cityname:/"");38. sb.append(pro.getCityname());39. sb.append("/"}");40. if(size>0){41. sb.append(",");42. }43. }44. sb.append("]");45. citString=sb.toString();46. System.out.println();47. }48.49. return SUCCESS;50. }51. public String bindAre() {52. List<TDictregion>list=this.loanInfoService.getArealistByCitId(citId);53. if(list.size()>0){54. StringBuilder sb= new StringBuilder();55. int size=list.size();56. sb.append("[");57. for (TDictregion pro : list) {58. size--;59. sb.append("{regionid:/"");60. sb.append(pro.getRegionid());61. sb.append("/",regionname:/"");62. sb.append(pro.getRegionname());63. sb.append("/"}");64. if(size>0){65. sb.append(",");66. }67. }68. sb.append("]");69. areString=sb.toString();70. }71.72. return SUCCESS;73. }74. public String bindBank() {75. List<TDictBankOutlets>list=this.loanInfoService.getBanklistByareId(areId);76. if(list.size()>0){77. StringBuilder sb= new StringBuilder();78. int size=list.size();79. sb.append("[");80. for (TDictBankOutlets bank : list) {81. size--;82. sb.append("{bankid:/"");83. sb.append(bank.getBankid());84. sb.append("/",bankname:/"");85. sb.append(bank.getBankname());86. sb.append("/"}");87. if(size>0){88. sb.append(",");89. }90.91. }92. sb.append("]");93. bankString=sb.toString();94. }95.96. return SUCCESS;97. }98. private String proString;99. private String citString;100. private String areString;101. private String bankString;102. private String proId;103. private String citId;104. private String areId;105. private LoanInfoService loanInfoService;106. @JSON(name="Pros")107. public String getProString() {108. return proString;109. }110. public void setProString(String proString) {111. this.proString = proString;112. }省略了其他的简单的getter 和setter有一个需要注意的地方就是@JSON(name="Pros") 这个是指定json对象的属性名@JSON(serialize=false)方法阻止序列序列化action中json不用的属性，如service，否则会报错：com.googlecode.jsonplugin.JSONException: ng.reflect.InvocationTargetException 页面代码：view plaincopy to clipboardprint?1. <SPAN>2. <select id="pro"onchange="getPro(this,'cit','are','bank')"style="width:100px;">3. <option value="-1">请选择省</option>4. </select>5. </SPAN>6. <SPAN>7. <select id="cit"onchange="getCit(this,'are','bank')"style="width:100px;">8. <option value="-1">请选择城市</option>9. </select>10. </SPAN>11. <span>12. <select id="are"style="width:100px;"name="einfo.TDictregion.regionid">13. <option value="-1">请选择地区</option>14. </select>15. </span>js代码：view plaincopy to clipboardprint?1. $(document).ready( function() {2. $.getJSON("bindProAction.action",function(json){3. //必须用eval把字符串转换成json4. var data=eval(json.Pros);5. // 遍历json对象6. for ( var prod in data) {7. // 临时变量判断循环次数8. var flag = 0;9. var option = document.createElement("option");10. // json对象中的一个元素11. for ( var key in data[prod]) {12. // 创建一个option13. document.getElementById("pro").appendChild(option);14. if (flag == 0) {15. option.value = data[prod][key];16. flag++;17. } else {18. option.text = data[prod][key];19. flag = 0;20. }21.23. }24. });25. });26.27. function getPro(obj,cid,aid,bid) {28. // 绑定之前清空第一个以外的option29. $("#"+cid).children().eq(0).siblings().remove();30. $("#"+aid).children().eq(0).siblings().remove();31. $("#"+bid).children().eq(0).siblings().remove();32. var temp = obj.value;33. // $("#pro").find("option:selected").val();34. $.ajax( {35. url : "bindCitAction.action",36. type : "get",37. dataType : "json",38. data : "proId=" + temp,39. success : function(json){40. data = eval(json.citString);41. for ( var cit in data) {42. // 临时变量判断循环次数43. var flag = 0;44. var option = document.createElement("option");45. // json对象中的一个元素46. for ( var key in data[cit]) {47. // 创建一个option48. document.getElementById(cid).appendChild(option);49. if (flag == 0) {50. option.value = data[cit][key];51. flag++;52. } else {53. option.text = data[cit][key];54. flag = 0;55. }56.58. }59.60. }61. });62. }63. function getCit(obj,aid,bid) {64. // 绑定之前清空第一个以外的option65. $("#"+aid).children().eq(0).siblings().remove();66. $("#"+bid).children().eq(0).siblings().remove();67. var temp = obj.value;68. // $("#cit").find("option:selected").val();69. $.ajax( {70. url : "bindAreAction.action",71. type : "get",72. dataType : "json",73. data : "citId=" + temp,74. success : function(json){75. data = eval(json.areString);76. for ( var are in data) {77. // 临时变量判断循环次数78. var flag = 0;79. var option = document.createElement("option");80. // json对象中的一个元素81. for ( var key in data[are]) {82. // 创建一个option83. document.getElementById(aid).appendChild(option);84. if (flag == 0) {85. option.value = data[are][key];86. flag++;87. } else {88. option.text = data[are][key];89. flag = 0;90. }91.93. }94. }95. });96. }97. function getBank(obj,bid){98. // 绑定之前清空第一个以外的option99. $("#"+bid).children().eq(0).siblings().remove();100. var temp = obj.value;101. $.ajax( {102. url : "bindBankAction.action",103. type : "get",104. dataType : "json",105. data : "areId=" + temp,106. success : function(json){107. data = eval(json.bankString);108. for ( var bank in data) {109. // 临时变量判断循环次数110. var flag = 0;111. var option = document.createElement("option");112. // json对象中的一个元素113. for ( var key in data[bank]) {114. // 创建一个option115. document.getElementById(bid).appendChild(option); 116. if (flag == 0) {117. option.value = data[bank][key];118. flag++;119. } else {120. option.text = data[bank][key];121. flag = 0;122. }123.124. }125. }126. }128. }有一个需要注意的地方：var data=eval(json.Pros);把字符串转换成json对象，不然遍历的时候就会一个字符一个字符的遍历.。