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。