Jsp页面上的下拉框代码按照如下格式写：<select name="selA" id="selA" onchange="buildSelect(this.value, 'selB','${ctx}/baseset/BltPermission/searchMenu.action?parentId=')">。其中id必填且唯一，onchange配置公共方法buildSelect。buildSelect方法的第一个参数是当前下拉框的值，第二个参数是下级联动下拉框的id，第三个参数是查询下级联动下拉框的值的集合的url，其中parentId用来传递当前下拉框的值，可以根据实际功能自行配置。
用bug模块的无限联动效果实例：
<s:select id="projectId" name="projectId" list="projectList" listValue="projectName" listKey="projectId" headerKey="%{model.projectId}" theme="simple" cssClass="" disabled="true" ></s:select>
在select中添加onchange事件onchange="buildSelect(this.value, 'selB','/bug/LgpBug_searchAssign.action?parentId=')"。其中url为产生下拉值集合的action。在框架中buildSelect函数实现如下：
function buildSelect(selectId,childId,url){
if (selectId == "") { //selectId为空串表示选中了默认项
clearOptions(document.getElementById(childId)); //清除目标列表及下级列表中的选项
document.getElementById(childId).onchange();
return; //直接结束函数调用，不必向服务器请求信息
}
targetId = childId;
var pars = "";
url = url+ selectId;
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: afterSelect
});
}
this.value的值最终会拼接到url上，所以parentId的值为this.value的值。在action中获得parentid的值后进行操作
使用ajax提交数据后回传数据进行数据处理，数据格式采用json串的格式
function afterSelect(originalRequest){
//alert(originalRequest.responseText);
var optionsInfo = JSON.parse(originalRequest.responseText); //将从服务器获得的文本转为对象直接量
var targetSelNode = document.getElementById(targetId); //得到下级对象
clearOptions(targetSelNode); //清除目标列表中的选项
if(optionsInfo == null){
return;
}
//遍历对象直接量中的成员
for(var i=0; i < optionsInfo.list.length; i++){
targetSelNode.appendChild(createOption(optionsInfo.list[i].menuId, optionsInfo.list[i].menuName)); //在目标列表追加新的选项
}
targetSelNode.onchange();
}
//根据传入的value和text创建选项
function createOption(value, text) {
var opt = document.createElement("option"); //创建一个option节点
opt.setAttribute("value", value); //设置value
opt.appendChild(document.createTextNode(text)); //给节点加入文本信息
return opt;
}
//清除传入的列表节点内所有选项
function clearOptions(selNode) {
selNode.length = 1; //设置列表长度为1，仅保留默认选项
selNode.options[0].selected = true; //选中默认选项
}
注意：targetId是js中的全局变量。在js中处理返还的json数据，转换为对象类型变量后在js中遍历展示添加到option中。
在action中
public String searchAssign(){
String parentId=this.getRequest().getParameter("parentId");
List list=lgpBugService.searchAssign(parentId);
String str=JSONUtil.getJsonString(list);
try {
this.getResponse().setCharacterEncoding("utf8");
this.getResponse().getWriter().write(str);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
获得产生的数据对象添加到response中。注意必须设置response的编码方法，因为ajax的request提交用的是get方法，存在乱码问题。
service层：
public List searchAssign(String parentId){
return lgpBugDao.searchAssign(parentId);
}
dao层：
public List searchAssign(String parentId){
String sql="select new com.luguang.bug.model.LgpBugExtends(c.userId,c.userAlias)from LgpProject as a ,LgpProjectGroup as b ,LgmUser as c where 1=1"
+" and a.projectId=b.projectId "
+" and b.userId=c.userId";
List userList=new ArrayList<LgpBugExtends>();
userList=this.getHibernateTemplate().find(sql);
return userList;
}
其中的LgpBugExtends类定义如下：
public class LgpBugExtends extends BaseEntity{
private Long menuId;
private String menuName;
public Long getMenuId() {
return menuId;
}
public void setMenuId(Long menuId) {
this.menuId = menuId;
}
public String getMenuName() {
return menuName;
}
public void setMenuName(String menuName) {
this.menuName = menuName;
}
public LgpBugExtends(Long menuId, String menuName) {
super();
this.menuId = menuId;
this.menuName = menuName;
}
public LgpBugExtends() {
super();
}
public LgpBugExtends(Long menuId) {
super();
this.menuId = menuId;
}
}
在定义该类时必须提供menuId，menuName属性，因为在jsp中处理json数据时访问的就是这两个属性，用来设置下拉框的listkey和listvalue属性。
返还的json数据格式如下：
list：{{menuId:id1,menuName:name1},{menuId:id2,menuName:name2}，{}，{}}所以必须按照这种数据格式来设计添加到下拉框中的类对象。