Jquery+Struts的<selected>二级联动

1.问题分析

多级select联动是网页选取多级项目必要的应用方法，一般情况下都是由一级select的选择项动态异步的修改二级select的option内容。为了方便添加内容与后台数据一致性，一般很少采用如博客点击打开链接中所展示的静态标签联动形式。

2.解决策略

整个联动流程如图所示：

1.监听一级select的change事件，并获得用于修改二级select的关键属性

2.在change事件中通过ajax向struts后台发送数据请求，并返回Json形式的数据

3.在ajax的success回调中向二级select添加需要的内容

3.代码说明

web端实现代码（负责一级select的change事件监听与二级select的数据请求、option添加）

$("#Devicetype").change(function(){   
var customUrl = "TruevalueInspectionQuery!execute"+$("#Devicetype").val()+"Inspection.action";  
$.ajax({
	url : customUrl,此处的通过ActionName!methodName.action的url形式调用自定义action执行方法，减少后台执行数据查询的action个数
	type : "post",
	dataType : "text",
	success : function(data) 
	{
	  obj= $.parseJSON(data)//若返回的是json类型数据而不执行此句，会报"Type error invalid 'in' opreand a"的错误
	  $("#Inspection option").remove();//<span style="font-family: Arial, Helvetica, sans-serif;">Inspection </span><span style="font-family: Arial, Helvetica, sans-serif;">为要绑定的select，先清除数据  </span>
          $.each(obj, function (i,item) //Jquery中第一个参数i为索引，第二个参数才是从obj中解析的item，因此第一个参数在回调时不可省略不写
          {  
            $("#Inspection").append("<option value=" + item.tag + ">" + item.name + "</option>");//tag与name为回传jsonobject的属性值  
          });  
	},
	error : function() {alert("网络异常请稍后再试...")}
	});//end ajax
});//end change

后台action方法（负责数据请求和Json化回传）

/**
 * 用于返回检定项目的检定项的action
 * <p>该action无默认excute方法，在使用时需要指定具体执行的自定义方法
 * @author cyoubo
 */
public class Ac_TruevalueInspectionQuery extends ActionSupport
{
	private static final long serialVersionUID = 7545375058031908844L;
	//定义要返回的Json结果，json话过程交由Strut框架自行完成
	List<InspectionItem> resultJson;
	//getter与setter
	public List<InspectionItem> getResultJson()
	{
		return resultJson;
	}
	
	public void setResultJson(List<InspectionItem> resultJson)
	{
		this.resultJson = resultJson;
	}
	//延迟构造，避免数据冲突
	public void prepareresultJson()
	{
		if(resultJson==null)
			resultJson=new ArrayList<InspectionItem>();
		resultJson.clear();
	}
	
	public String executeHDMIInspection()
	{
		prepareresultJson();
		
		resultJson.add(new InspectionItem("Consitency", "一致性", ""));
		return SUCCESS;
	}
	
	public String executeEDMIInspection()
	{		
		prepareresultJson();
		
		resultJson.add(new InspectionItem("Consisten", "一致性", ""));
		resultJson.add(new InspectionItem("Spotposition", "光相位", ""));
		
		return SUCCESS;
	}
}

注意在strut.xml配置文件中，将该action配置为返回json的action

<package name="JsonPackage" extends="json-default">
<action name="Truevaluescan" class="com.dr.truevalue.action.Ac_<span style="font-family: Arial, Helvetica, sans-serif;">Ac_TruevalueInspectionQuery</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span>
<span style="white-space:pre">	</span><result type="json">
	<!-- 这里指定将被Struts2序列化的属性，该属性在action中必须有对应的getter方法 -->
	<param name="root">resultJson</param>
	</result>
</action></package>