前台下拉框所在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="--请选择类别--" οnchange="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="请输入关键字" οnclick="search_resetKeyString();" οnblur="search_resetKeyString();"></s:textfield>
<input type="button" id="search_butSubmit" value="查询" οnclick="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); } }