Struts2 +json+ jquery 实现三级联动

action代码

public class BindAction extends BaseAction{ public String bindPro(){ List<TDictProvince>list=this.loanInfoService.getProlist(); if(list.size()>0){ StringBuilder sb= new StringBuilder(); int size=list.size(); sb.append("["); for (TDictProvince pro : list) { size--; sb.append("{provinceid:/""); sb.append(pro.getProvinceid()); sb.append("/",provincename:/""); sb.append(pro.getProvincename()); sb.append("/"}"); if(size>0){ sb.append(","); } } sb.append("]"); proString=sb.toString(); } return SUCCESS; } public String bindCit() { List<TDictCity>list=this.loanInfoService.getCitylistByProId(proId); if(list.size()>0){ StringBuilder sb= new StringBuilder(); int size=list.size(); sb.append("["); for (TDictCity pro : list) { size--; sb.append("{cityid:/""); sb.append(pro.getCityid()); sb.append("/",cityname:/""); sb.append(pro.getCityname()); sb.append("/"}"); if(size>0){ sb.append(","); } } sb.append("]"); citString=sb.toString(); System.out.println(); } return SUCCESS; } public String bindAre() { List<TDictregion>list=this.loanInfoService.getArealistByCitId(citId); if(list.size()>0){ StringBuilder sb= new StringBuilder(); int size=list.size(); sb.append("["); for (TDictregion pro : list) { size--; sb.append("{regionid:/""); sb.append(pro.getRegionid()); sb.append("/",regionname:/""); sb.append(pro.getRegionname()); sb.append("/"}"); if(size>0){ sb.append(","); } } sb.append("]"); areString=sb.toString(); } return SUCCESS; } public String bindBank() { List<TDictBankOutlets>list=this.loanInfoService.getBanklistByareId(areId); if(list.size()>0){ StringBuilder sb= new StringBuilder(); int size=list.size(); sb.append("["); for (TDictBankOutlets bank : list) { size--; sb.append("{bankid:/""); sb.append(bank.getBankid()); sb.append("/",bankname:/""); sb.append(bank.getBankname()); sb.append("/"}"); if(size>0){ sb.append(","); } } sb.append("]"); bankString=sb.toString(); } return SUCCESS; } private String proString; private String citString; private String areString; private String bankString; private String proId; private String citId; private String areId; private LoanInfoService loanInfoService; @JSON(name="Pros") public String getProString() { return proString; } public void setProString(String proString) { this.proString = proString; }

省略了其他的简单的getter 和setter

有一个需要注意的地方就是

@JSON(name="Pros") 这个是指定json对象的属性名

@JSON(serialize=false)方法阻止序列序列化action中json不用的属性，如service，否则会报错：

com.googlecode.jsonplugin.JSONException: java.lang.reflect.InvocationTargetException

页面代码：

<SPAN> <select id="pro" οnchange="getPro(this,'cit','are','bank')" style="width:100px;"> <option value="-1">请选择省</option> </select> </SPAN> <SPAN> <select id="cit" οnchange="getCit(this,'are','bank')" style="width:100px;"> <option value="-1">请选择城市</option> </select> </SPAN> <span> <select id="are" style="width:100px;" name="einfo.TDictregion.regionid" > <option value="-1">请选择地区</option> </select> </span>

js代码：

$(document).ready( function() { $.getJSON("bindProAction.action",function(json){ //必须用eval把字符串转换成json var data=eval(json.Pros); // 遍历json对象 for ( var prod in data) { // 临时变量判断循环次数 var flag = 0; var option = document.createElement("option"); // json对象中的一个元素 for ( var key in data[prod]) { // 创建一个option document.getElementById("pro").appendChild(option); if (flag == 0) { option.value = data[prod][key]; flag++; } else { option.text = data[prod][key]; flag = 0; } } } }); }); function getPro(obj,cid,aid,bid) { // 绑定之前 清空第一个以外的option $("#"+cid).children().eq(0).siblings().remove(); $("#"+aid).children().eq(0).siblings().remove(); $("#"+bid).children().eq(0).siblings().remove(); var temp = obj.value; // $("#pro").find("option:selected").val(); $.ajax( { url : "bindCitAction.action", type : "get", dataType : "json", data : "proId=" + temp, success : function(json){ data = eval(json.citString); for ( var cit in data) { // 临时变量判断循环次数 var flag = 0; var option = document.createElement("option"); // json对象中的一个元素 for ( var key in data[cit]) { // 创建一个option document.getElementById(cid).appendChild(option); if (flag == 0) { option.value = data[cit][key]; flag++; } else { option.text = data[cit][key]; flag = 0; } } } } }); } function getCit(obj,aid,bid) { // 绑定之前 清空第一个以外的option $("#"+aid).children().eq(0).siblings().remove(); $("#"+bid).children().eq(0).siblings().remove(); var temp = obj.value; // $("#cit").find("option:selected").val(); $.ajax( { url : "bindAreAction.action", type : "get", dataType : "json", data : "citId=" + temp, success : function(json){ data = eval(json.areString); for ( var are in data) { // 临时变量判断循环次数 var flag = 0; var option = document.createElement("option"); // json对象中的一个元素 for ( var key in data[are]) { // 创建一个option document.getElementById(aid).appendChild(option); if (flag == 0) { option.value = data[are][key]; flag++; } else { option.text = data[are][key]; flag = 0; } } } } }); } function getBank(obj,bid){ // 绑定之前 清空第一个以外的option $("#"+bid).children().eq(0).siblings().remove(); var temp = obj.value; $.ajax( { url : "bindBankAction.action", type : "get", dataType : "json", data : "areId=" + temp, success : function(json){ data = eval(json.bankString); for ( var bank in data) { // 临时变量判断循环次数 var flag = 0; var option = document.createElement("option"); // json对象中的一个元素 for ( var key in data[bank]) { // 创建一个option document.getElementById(bid).appendChild(option); if (flag == 0) { option.value = data[bank][key]; flag++; } else { option.text = data[bank][key]; flag = 0; } } } } }); }

有一个需要注意的地方：

 

var data=eval(json.Pros); 把字符串转换成json对象，不然遍历的时候就会一个字符一个字符的遍历.