无限下拉框实现（java+ajax）

数据表结构：

 

1：在原有的下拉框显示（不叠加）

前端代码：

<!-- 类别下拉框 -->
    <script type="text/javascript">
    function change(val,name) {
        var vc=""; //定义一个存放分类编号的变量
        var str = val; //类别编号
        var id; // 分类id
        //alert(val);
        id = str;
        //alert(id);
        $("select[name=category_1]").empty();     //清空seletct的数据 
        <%-- var url = '<%= basePath%>/biz/ServiceKnowledge_queryCategoryPid.action?categoryPid=001'+id; --%>
        //alert(id);
        $.ajax({
            type: "POST",
            url: '<%= basePath%>/biz/ServiceKnowledge_queryCategoryPid.action?',
            data: {categoryPid:id},
            datatype : 'json', 
            success: function(result){
                if(result.length!=2){
                var optionString = "<option grade=\'请选择\' selected = \'selected\'>--请选择子类--</option>";
                //alert(result);
                var xqo = eval('(' + result + ')'); 
                for(var i in xqo){ 
                    　　//alert(xqo[i].category); 
                    optionString+="<option value='"+xqo[i].categoryId+"'>"+xqo[i].category+"</option>"    
                } 
                 $("select[name=category_1]").append(optionString); 
                }
            }
        });
        //$("#categoryId").val();
        vc+=str;
        $("#categoryId").val(vc);
    }
    </script>

<li><label>类别选择</label>
    <div id="select" >
    <select style="width:200px;height: 30px;background:#eeeeee" name="category_1" id="category_1" onchange="change(this.options[this.options.selectedIndex].value,this.options[this.options.selectedIndex].text)">
        <option >--请选择分类--</option>
        <c:forEach items="${serviceCategoryList}" var="serviceCategory">     
            <option value="${serviceCategory.categoryId}">${serviceCategory.category}</option>
        </c:forEach>
    </select>
    </div>
    </li>

 

后端代码：

/**
     * 跳转到添加页面
     * @return
     */
    public String openAdd(){
        List<ServiceCategory> serviceCategoryList = serviceCategoryService.queryCategoryPid("0");
        ActionContext.getContext().getSession().put("serviceCategoryList", serviceCategoryList);
        forwardView = ADD_JSP;
        return SUCCESS;
    }

/**
     * 查询categoryPid的数据
     * @return
     * @throws Exception
     * @author uug
     * @throws IOException 
     * @date 2017年12月16日
     */
    public String queryCategoryPid() throws IOException{
        List<ServiceCategory> serviceCategoryList = serviceCategoryService.queryCategoryPid(categoryPid);
        HttpServletResponse response = ServletActionContext.getResponse();  
        PrintWriter writer = response.getWriter(); 
        try {
            Gson gson = new Gson();
            String result = gson.toJson(serviceCategoryList);
            System.err.println("result:"+result);
            writer =  response.getWriter();
            writer.write(result);
            //writer.println(result);
        } catch (Exception e) {
            System.out.println("getAllHotnewsForJson出错："+e);
        }finally{
            writer.flush();
            writer.close();
        }
        return null;
    }

2:下拉框日后叠加

前端代码：

<script type="text/javascript">
var allNum = 1;//菜单的总的级数
/*
Ajax想数据库读取菜单，即传入一级菜单，获取二级
num,菜单的级数。传入1级以后，判断一下2级是否存在，不存在则生成html代码，存在则清空以后从新赋值
实现原理：
1.级别从小到大：第一次选中，则直接生成2级，同理，选中n级，自动生成n+1级
2.级别从大到小：若是选中了4级，忽然再选中1级，那么2级以上的先删除，而后再从新生成2级。
*/
function getMenuByajax(num,categoryId){
    //alert('num='+num);
    menuVal = $('#menu'+num).val();
    //alert('menuVal='+menuVal)
    //alert('categoryId='+categoryId)
    $("#categoryId").attr("value",categoryId);//给底下隐藏的categoryid字段赋值。
    //向服务器发送ajax请求，发送categoryPid的值，获取下级菜单列表
    $.post("<%=path %>/front/CategoryJson_queryByCategoryPid.action",
    {
        categoryPid:menuVal
    },
    function(data,status){
        var dataJson = JSON.stringify(data);
        //alert(JSON.stringify(data));
        if(null == dataJson || "[]"==dataJson){
            return;
        }
        //alert("数据: \n" + data + "\n状态: " + status);
        if(allNum<=num){//说明是从高级以后再点击低级，例如点击了4级以后再点击2级，那么须要删除3和4级
            for (var i=num+1;i<=allNum;i++){
                $("#menu"+i).remove();
            }
            allNum = num;//重置allNum最大级数
        }
        //总的级别+1
        allNum = allNum + 1;
        //alert('allNum='+allNum);
        //先添加select列表，名字就是menu{级别}，即若是是menu2，点击以后生成的是menu3
        $("#seachformLi").append("<select name=\"menu"+allNum+"\" id=\"menu"+allNum+"\" onchange=\"getMenuByajax("+allNum+",this.options[this.options.selectedIndex].value)\"><option value=\"\">--选择"+allNum+"级菜单--</option></select>");
        $("#menu"+allNum).append("<option value=\"\">--选择一级菜单--</option>");
        //给菜单加option选项值
        $.each(data, function(i, item) {
            //alert('item.categoryId='+item.categoryId);
            $("#menu"+allNum).append("<option value=\""+item.categoryId+"\">"+item.category+"</option>");
        });
    });
}
</script>



 <li id="seachformLi"><label>父类类别编号</label>
    <select name="menu1" id="menu1" onchange="getMenuByajax(1,this.options[this.options.selectedIndex].value)">
           <option value="">--选择一级菜单--</option>
           <s:iterator value="listServiceCategory">              
           <option value="${categoryId}">${category}</option>
           </s:iterator>
    </select>
    </li>

后端代码：

/**
     * 跳转到添加页面
     * @return
     */
    public String openAdd(){
        listServiceCategory = serviceCategoryService.queryCategoryPid(serviceCategory.getCategoryPid());//读取列表
        forwardView = ADD_JSP;
        return SUCCESS;
    }

/**
     * 根据父类编号查找儿子列表:父类类别编号，若是为空,则直接输出一级菜单
     * @return
     * @throws IOException
     */
    public String queryByCategoryPid() throws IOException{
        //System.out.println("进入queryByCategoryPid...,categoryPid="+categoryPid);
        //String check = "";
        try {
            List<ServiceCategory> list = serviceCategoryService.queryCategoryPid(categoryPid);
            Gson gson = new Gson();
            String json = gson.toJson(list);
            PrintWriter writer = getPrintWriter();
            writer.write(json);
            writer.flush();
            writer.close();
        } catch (Exception e) {
            System.out.println("queryByCategoryPid出错："+e);
        }
        return null;
    }

3：统一的dao层（service层省略）

/**
     * 查询categoryPid的数据
     * @param categoryPid
     * @return
     */
    @SuppressWarnings("unchecked")
    public List<ServiceCategory> queryCategoryPid(String categoryPid){
        //System.out.println("进入dao。。。");
        String hql = "";
        if(null == categoryPid || "".equals(categoryPid)){
            categoryPid = "";
        }
        hql = "from ServiceCategory where categoryPid = '"+categoryPid+"'";
        //System.out.println("hql=="+hql);
        return this.getHibernateTemplate().find(hql);
    }