Jquery级联下拉菜单
注释：
该方法是一个通用方法，不局限多少级，无限级都可以，该示例演示新建页，和编辑页面不同的调用。
新建页面时需要初始化第一个select。编辑页面无需初始化。返回json时，后台对象做过一次简单处理，把pojo的list转换为Object list，object中只有两个属性id、name。然后再toJson，返回view。
按照调用的先后顺序贴代码，如下：
新建页面代码：
<select name="categoryid1" id="categoryid1" class="required">
<option value=""></option>
</select>
<select name="categoryid2" id="categoryid2" class="required">
</select>
<select name="categoryid3" id="categoryid3" class="required">
</select>
<select name="categoryid4" id="categoryid4" class="required">
</select>
<script type="text/javascript">
/* 初始化第一个下拉框数据 */
setSelect('0','categoryid1','getCaseCategory.htm');
$(function() {
$("#categoryid1").change(function(){
$("#dynamic_html").hide();
onSelectChange($(this),'categoryid2','getCaseCategory.htm');
});
$("#categoryid2").change(function(){
onSelectChange($(this),'categoryid3','getCaseCategory.htm');
});
$("#categoryid3").change(function(){
onSelectChange($(this),'categoryid4','getCaseCategory.htm');
});
});
</script>
JS代码：
/*
* 基JQuery自动创建级联下拉菜单，动态ajax请求后台数据,
参数：下拉框变更的时候获取当前 对象、标识、url
如果是新建页面，需要直接调用该方法，obj=0或者是指定的根节点id，后台代码判断如果=0或者根节点id，直接查询，其它则会子级的，要根据ID获取下级数据，页面需要单独调用onSelectChange();如果是编辑页面则不需要直接调用
*/
function onSelectChange(obj,toSelId,urlStr){
if(obj.val() != null && obj.val() !="" && obj.val().length>0){
setSelect(obj.val(),toSelId,urlStr);
}else{
$("#" + toSelId).empty();//如果选择项为空时，当前控件清空
$("#" + toSelId).nextAll('select').empty()//如果选择项为空时，当前控件的子级全部清空
obj.nextAll('select').hide();
}
}
//请求后台获取数据
function setSelect(parentId,toSelId,urlStr,selectedId){
jQuery.ajax({
type: "POST",
url: urlStr,
async: false,
cache: false,
data:"parentid="+parentId,
success: function(data){
createSelectObj(data,toSelId,selectedId);
},
error:function(data){
window.location.href = "/ecs/index.html";
}
});
}
//根据已获取数据动态构建select控件
function createSelectObj(data,toSelId,selectedId){
var arr = jsonParse(data);
var obj = document.getElementById(toSelId);
if(arr != null && arr !="" && arr.length>0){
initSelectObj(obj,toSelId);
for(var i = 0; i < arr.length ; i++){
var op = document.createElement("option");
op.setAttribute("value",arr[i].id);
if(selectedId == arr[i].id){
op.setAttribute("selected","selected");
}
op.appendChild(document.createTextNode(arr[i].name));
obj.appendChild(op);
}
$("#" + toSelId).nextAll('select').hide();
$("#" + toSelId).show();
$("#" + toSelId).nextAll('select').empty();//清空所有子级select控件，否则当重新选择的时候，上次选择的子级值只是被隐藏，但值依旧存在，依然会被保存。
}else{//如果当前节点下没有子节点了，那么就把下一个select置空
$("#" + toSelId).nextAll('select').hide();
$("#" + toSelId).hide();
$("#" + toSelId).nextAll('select').empty();
initSelectObj(obj,toSelId);
}
}
//初始化指定id的select控件
function initSelectObj(obj,toSelId){
obj.innerHTML="";
var nullOp = document.createElement("option");
nullOp.setAttribute("value","");
nullOp.appendChild(document.createTextNode(""));
obj.appendChild(nullOp);
}
新建页面请求的后台代码：
@RequestMapping(value = {"/getCaseCategory.htm"})
public String getCaseCategory(ModelMap model,HttpServletRequest req, Integer parentId){
/*String parentId=req.getParameter("parentId");//获取父级ID */
log.info("获取服务类型，父id="+parentId);
/*List<SelectObj> sList = selectObjService.findCategorySelectObjListByParentId(Integer.parseInt(parentId));*/
List<SelectObj> sList = selectObjService.findCategorySelectObjListByParentId(parentId);
JSONArray jsonArray = JSONArray.fromObject(sList);
log.info("通过父id："+parentId+"获取下级服务类型:"+jsonArray);
model.put("data", jsonArray);
return "json";
}
编辑页代码：
<select name="categoryid1" id="categoryid1" disabled="disabled"><option value=""></option>
#foreach($c1 in $c1List)
#if($!{c1.id} == $!case.categoryid1)
<option value="$!{c1.id}" selected="selected">$!{c1.name}</option>
#else
<option value="$!{c1.id}">$!{c1.name}</option>
#end
#end
</select>
#if(!$case.categoryid2.isNull() && ${case.categoryid2} && $!{case.categoryid2}!="0")
<select name="categoryid2" id="categoryid2" disabled="disabled">
<option value=""></option>
#foreach($c2 in $c2List)
#if($!{c2.id} == $!case.categoryid2)
<option value="$!{c2.id}" selected="selected">$!{c2.name}</option>
#else
<option value="$!{c2.id}">$!{c2.name}</option>
#end
#end
</select>
#end
#if(!$case.categoryid3.isNull() && ${case.categoryid3} && $!{case.categoryid3}!="0")
<select name="categoryid3" id="categoryid3" disabled="disabled">
<option value=""></option>
#foreach($c3 in $c3List)
#if($!{c3.id} == $!case.categoryid3)
<option value="$!{c3.id}" selected="selected">$!{c3.name}</option>
#else
<option value="$!{c3.id}">$!{c3.name}</option>
#end
#end
</select>
#end
#if(!$case.categoryid4.isNull() && ${case.categoryid4} && $!{case.categoryid4}!="0")
<select name="categoryid4" id="categoryid4" disabled="disabled">
<option value=""></option>
#foreach($c4 in $c4List)
#if($!{c4.id} == $!case.categoryid4)
<option value="$!{c4.id}" selected="selected">$!{c4.name}</option>
#else
<option value="$!{c4.id}">$!{c4.name}</option>
#end
#end
</select>
#end
编辑页调用的JS，也是上面的JS，只是在编辑页面使用时不需要初始化第一个select。