注释:
该方法是一个通用方法,不局限多少级,无限级都可以,该示例演示新建页,和编辑页面不同的调用。
新建页面时需要初始化第一个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。
相关推荐
网上找了很久这种菜单,浪费了很多时间,实在没办法,只好老老实实去官网上按说明弄了一个,并更新了,jquery1.5.2, 希望给有需要的朋友可以节约一点时间,欢迎交流,qq:170262
JQuery写的日期级联下拉菜单 :可以直接运行,不需要部署iis 以便大家可以直接使用
利用Jquery实现级联下拉菜单效,其中运用到的知识有ASP.NET一般处理程序;Ajax,Json
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect,功能强大非常不错的jQuery插件, 支持省市区三级联动以及全球国家城市的联动,数据采用JSON格式导入,非常方便的,强大的参数 自定义功能,还可以...
级联下拉菜单jQuery插件,它允许您根据先前的选择来填充一组表单下拉菜单。演示版基本用法要使用该插件而不覆盖任何默认设置,您需要使用多个下拉(选择)菜单创建表单的结构。 在以下示例中,我正在使用<form>...
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
Jquery,横排下拉菜单,竖排下拉菜单,可直接套用.
完整可运行的用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
Jquery,横排下拉菜单,竖排下拉菜单,可直接套用.
通过三个级联菜单选择不同省份、地区、城市
jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <title>&...
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...
Jquery,横排下拉菜单,竖排下拉菜单,可直接套用.