無限下拉框實現（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);
    }