jquery通过struts2请求，返回json数据，在jsp页面形成二级联动下拉列表

本文是要做一个二级联动，动态的。通过jquery返回json类型的数据，然后在jsp页面处理，生成第二级下拉列表菜单。
所需js库： jquery.js,json2.js
jar包:json-lib-2.2.3-jdk15.jar,ezmorph-1.0.6.jar

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2.js"></script>

<script type="text/javascript">
jQuery(function($){
var obj=$("#category");
if(typeof obj != 'undefined' && obj !=''){
	showGongdanType(obj.val());
}
});
function onchangeShow(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},  // 传递参数
type : "post",
cache : false,
dataType : "json",
success:onchangecallback
});
}
function onchangecallback(data){ 
    document.all['type'].options.length = 0;
    var str="<option value=''>全部</option>";
    for(var i=0;i<data.length;i++){
		str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"
    }
    $("#type").html(str);
}
function showGongdanType(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(data){ 
      document.all['type'].options.length = 0;
    var str="<option value=''>全部</option>";
    for(var i=0;i<data.length;i++){
     str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"
    }
    $("#type").html(str);
// 下面代码是为了第二级下拉列表的定位。因为非struts2的标签，无法自己定位
    if("${gongdanType}"!=''){
    	for(var i=0;i<data.length;i++){
    		if(data[i].value=="${gongdanType}")
    		document.all['type'].selectedIndex=i+1;
    	}
    }
}
</script>

			<td width="10%" height="25" class="alignLeft">
				统计类别：
			</td>
			<td width="10%" valign="top" class="alignLeft">
					<s:select name="form.category" list="categorys" id="category"
						listKey="value" listValue="valueName" 
						onchange="onchangeShow(this.value)">
					</s:select>
			</td>
			<td width="10%" height="25" class="alignLeft">
				工单类型：
			</td>
			<td width="10%" valign="top" class="alignLeft">
			 <select name="form.gongdanType" id="type" >
   			</select></td>

上面写了两个请求的函数，代码一样，只不过在第一级下拉列表onchange时，第二级下拉列表要定位在第一个值“全部”。


action

public class GongdanTypeStatAction extends ActionSupport implements Preparable {
	/** 统计类别：URL传参，默认统计类别是'CB' */
	private String type;
	/** 统计类别:(<s:select>标签list ) */
	private List<Param> categorys;
	/** 工单类型(第二级的数据) */
	private List<Param> gongdanTypes;
	/** ajax 传递的参数 统计类别 */
	private String statCategory;

	public void prepare() throws Exception {
		type = ServletActionContext.getRequest().getParameter("type");
		categorys = new ArrayList<Param>();
		Param param1 = new Param();
		param1.setValue("CB");
		param1.setValueName("业务变更");
		Param param2 = new Param();
		param2.setValue("APP");
		param2.setValueName("资源申请");
		categorys.add(param1);
		categorys.add(param2);
	}
	
	// 得到业务变更和资源申请下的变更类别
	public void ajaxGetType() throws Exception {
		// 工单类型
		if("CB".equals(statCategory)){
			gongdanTypes = new ArrayList<Param>();
			for(EChangeBusinessCategory ec:EChangeBusinessCategory.values()){
				Param param = new Param();
				param.setValue(ec.getKey());
				param.setValueName(ec.getLable());
				gongdanTypes.add(param);
			}
		}else if("APP".equals(statCategory)){
			gongdanTypes = new ArrayList<Param>();
			for (EApplyType et : EApplyType.values()) {
				Param param = new Param();
				param.setValue(et.getKey());
				param.setValueName(et.getName());
				gongdanTypes.add(param);
			}
		}
		JSONArray jsonObj = JSONArray.fromObject(gongdanTypes);
		sendMsg(jsonObj.toString());    //发送JSON格式的字符串回JS端    
	}
	
	public void sendMsg(String content) throws IOException{    
        HttpServletResponse response = ServletActionContext.getResponse();    
        response.setCharacterEncoding("UTF-8");    
        response.getWriter().write(content);    
    }  
}

Param.java

/**
 * 功能概述：<br>
 * 存储同一个类型的参数（类型名，类型值，和一条参数列表）
 */
public class Param {

	private Object entity;

	/** 参数的值 参数的业务唯一字段值 */
	private String value;

	/** 参数的名称. 参数的显示出来的 */
	private String valueName;

	public Param() {

	}

	/**
	 * @param value
	 * @param valueName
	 */
	public Param(String value, String valueName) {
		this.value = value;
		this.valueName = valueName;
	}

	/**
	 * @return the value
	 */
	public String getValue() {
		return value;
	}

	/**
	 * @param value
	 *            the value to set
	 */
	public void setValue(String value) {
		this.value = value;
	}

	/**
	 * @return the valueName
	 */
	public String getValueName() {
		return valueName;
	}

	/**
	 * @param valueName
	 *            the valueName to set
	 */
	public void setValueName(String valueName) {
		this.valueName = valueName;
	}

	/**
	 * @return Returns the entity.
	 */
	public Object getEntity() {
		return entity;
	}

	/**
	 * @param entity
	 *            The entity to set.
	 */
	public void setEntity(Object entity) {
		this.entity = entity;
	}

}

两个枚举类型
EChangeBusinessCategory.java
EApplyType.java

public enum EChangeBusinessCategory {

	// 系统安装
	SYSTEM_SETUP("SYS", "系统安装"),
	// 监控需求
	MONITOR_DEMAND("MONI", "监控需求"),
	// 机柜需求
	CABINETS_DEMAND("CABI", "机柜需求"),
	
	// 撤销存储
	STORAGE_DEMAND("STOR","撤销存储"),
	// 网络需求
	NETWORK_DEMAND("NET", "网络需求");

	private String key;

	private String lable;


	EChangeBusinessCategory(String key, String value) {
		this.key = key;
		this.lable = value;
	}

	/**
	 * 将字符串转化为枚举值
	 * 
	 * @param key
	 * @return
	 */
	public static EChangeBusinessCategory getEnumType(String key) {
		EChangeBusinessCategory[] values = EChangeBusinessCategory.values();
		for (int i = 0; i < values.length; i++) {
			EChangeBusinessCategory eInfo = values[i];
			if (eInfo.getKey().equals(key)) {
				return eInfo;
			}
		}
		return null;
	}

	/**
	 * @return Returns the lable.
	 */
	public String getLable() {
		return lable;
	}

	/**
	 * @return Returns the key.
	 */
	public String getKey() {
		return key;
	}

}


public enum EApplyType {

	SERV("SERV", "服务器"),

	CABI("CABI", "机柜"),

	IP("IP", "IP"),

	STOR("STOR", "存储");

	private String key;

	private String name;

	/**
	 * @param key
	 * @param name
	 */
	EApplyType(String key, String name) {
		this.key = key;
		this.name = name;
	}

	/**
	 * @return Returns the key.
	 */
	public String getKey() {
		return key;
	}

	/**
	 * @return Returns the name.
	 */
	public String getName() {
		return name;
	}

	/**
	 * @param roleId
	 * @return
	 */
	public static EApplyType getEnumType(String key) {
		EApplyType[] values = EApplyType.values();
		for (int i = 0; i < values.length; i++) {
			EApplyType eInfo = values[i];
			if (eInfo.getKey().equals(key)) {
				return eInfo;
			}
		}
		return null;
	}
}

action配置

		<action name="ajaxGetType" class="GongdanTypeStatAction" 
			method="ajaxGetType">
		</action>

评论

6 楼 benjaminxiacc 2012-05-23  

引用

5 楼 benjaminxiacc 2012-05-23  

[flash=200,200][/flash][url][/url][img][/img]

引用

引用

[u][/u][/b][b]

引用

[img][/img][url][/url][flash=200,200][/flash][/url][url]

引用

引用

引用

引用

引用

4 楼 ppyeah123 2012-01-27  

请问为什么总是报这个错：
[tag 'select', field 'list', id 'category', name 'form.category': The requested list key 'categorys' could not be resolved as a collection/array/map/enumeration/iterator type. Example: people or people.{name}

这个categorys 怎么取到值呢？
action里get set 方法我也加了呀

3 楼 swbyzx 2011-11-28  

解决了困扰我已久的问题，谢谢了

2 楼 bushkarl 2010-08-20  

1 楼 hnzhangshi 2010-01-12  

很详细，谢谢了！