struts2 jQuery ajax json实现二级下拉框联动

前台下拉框所在form表单：

<s:form name="search_formKeyString" action="selectCategory" method="post">
						<table>
							<tr>
								<td>
									<s:select name="userSelect.classify.id" list="#request['categoryList']" theme="simple" listKey="id" listValue="name" headerKey="0" headerValue="--请选择类别--" onchange="searSelectChange(this);"></s:select>
								</td>
								<td>
									<s:select name="userSelect.subClass.id" list="#request['categSubList']" theme="simple" listKey="id" listValue="name"></s:select>
								</td>
							</tr>
						</table>
						<s:textfield name="userSelect.keyString" id="search_inputKeyString" value="请输入关键字" onclick="search_resetKeyString();" onblur="search_resetKeyString();"></s:textfield>
						<input type="button" id="search_butSubmit" value="查询" onclick="searButSubmitClick(this.form);"></input>
					</s:form>

 点击查询按钮触发的javascript函数，使用jQuery的ajax函数：

$.ajax(
			{
				url : "slctSubCategory.action",
				//数据发送方式
				type : "post",
				//接收数据格式
				dataType : "json",
				//要传递的数据
				data : param,
				//回调函数，接收服务器端返回给客户端的值，即result值
				success : function (data) {
					if (data != null) {
						$.each(data, function (i, item) {
//							alert(item.id + "," + item.preId + "," + item.name);
							var option = "<option value='" + item.id + "'>" + item.name + "</option>";
							select.append(option);
//							alert(item.name);
						});
					} else {
						var option = "<option value='0'>该分类无子选项</option>";
						select.append(option);
					}
				}
			}
	);

 后台struts2.xml配置，extends要写成json-default，result的type要写成json：

 <package name="myworld" extends="json-default">
  <action name="slctSubCategory" class="action.searchCategory.SearchResultAction" method="getSubCategoryList">
   <result name="success" type="json">
    <param name="root">subCateList</param>
   </result>
  </action>
 </package>

 Action中的getSubCategoryList方法：

public String getSubCategoryList() throws Exception {
		int classify = userSelect.getClassify().getId();
		subCateList = new ArrayList<Category>();
		switch (classify) {
			case 1 : {
				subCateList.add(new Category(5, 1, "账号密码"));
				break;
			}
			case 2 : {
				subCateList.add(new Category(6, 2, "文章"));
				break;
			}
			case 3 : {
				subCateList.add(new Category(7, 3, "网页"));
				break;
			}
			case 4 : {
				subCateList.add(new Category(8, 4, "帖子"));
				break;
			}
		}
		return SUCCESS;
	}

 查询结果返回给客户端然后调用ajax自动执行success的函数。遍历List。

 

如果后台返回的是一个Map，则success的函数可写成：

success : function (data) {
					if (data != null) {
						$.each(data, function (key, value) {
							switch (key) {
								case "1" : {
									break;
								}
								case "2" : {
									break;
								}
								default : {
									
								}
							}
						});
					} else {
						var option = "<option value='0'>该分类无子选项</option>";
						select.append(option);
					}
				}