多级类目展示

相关代码：https://github.com/eight1302/hydp

1、三级类目处理：

 /*定义三级分类数据*/ 
    //一级分类
    function lmshow(data){
        for(var i=0;i<data.length;i++){
            if(data[i].level == 1){
                province.push(data[i]);
            }
        }
        $category.val(province[0].name);
        $category.attr('data-pid',province[0].t_id);
        city.length = 0;
        for(var i=0;i<data.length;i++){
            if(data[i].pid == $category.attr('data-pid')){
                city.push(data[i]);
            }
        }

        var expressP, expressC, expressD, expressArea, areaCont;
        var arrow = " <font>&gt;</font> ";
    }
    /*初始化一级目录*/
	function intProvince() {
		areaCont = "";
		for (var i=0; i<province.length; i++) {
			areaCont += '<li data-id = "'+province[i].id+'" data-tid="'+province[i].t_id+'" data-name="'+province[i].name+'" class="selectP" style="height:35px;line-height:35px;cursor:pointer">' + province[i].name + '</li>';
		}
		$("#sort1").html(areaCont);
	}
	intProvince();
    //一级类目处理
    $('.selectP').on('click',function(){
        var id = $(this).attr('data-id'),
        tid = $(this).attr('data-tid'),
        name =  $(this).attr('data-name');
        city.length=0;
        for(var i=0;i<lmdataAll.length;i++){
            if(lmdataAll[i].pid == id){
                city.push(lmdataAll[i]);
            }  
        }
        areaCont = "";
        for (var i=0; i<city.length; i++) {
            areaCont += '<li data-id = "'+city[i].id+'" data-tid="'+city[i].t_id+'" data-name="'+city[i].name+'" class="selectc" style="height:35px;line-height:35px;cursor:pointer">' + city[i].name + '</li>';
        }
        $("#sort2").html(areaCont).show();
        $("#sort3").hide();
        $(this).addClass("active").siblings("li").removeClass("active");
        $("#releaseBtn").removeAttr("disabled");
        $category.val(name);
        $category.attr('data-pid',tid);
    });
    //二级类目处理
    $('.wareSort').on('click','.selectc',function(){
        var id = $(this).attr('data-id'),
        tid = $(this).attr('data-tid'),
        name =  $(this).attr('data-name');
        district.length=0;
        for(var i=0;i<lmdataAll.length;i++){
          if(lmdataAll[i].pid == id){
            district.push(lmdataAll[i]);
          }  
        }
        areaCont = "";
        for (var i=0; i<district.length; i++) {
            areaCont += '<li data-id = "'+district[i].id+'" data-tid="'+district[i].t_id+'" data-name="'+district[i].name+'" class="selectd" style="height:35px;line-height:35px;cursor:pointer">' + district[i].name + '</li>';
        }
        $("#sort3").html(areaCont).show();
        $category.val(name);
        $category.attr('data-pid',tid);
        $(this).addClass("active").siblings("li").removeClass("active");
    });
    //三级类目
    $('.wareSort').on('click','.selectd',function(){
      var id = $(this).attr('data-id'),
      tid = $(this).attr('data-tid'),
      name =  $(this).attr('data-name');
      $category.val(name);
      $category.attr('data-pid',tid);
      $(this).addClass("active").siblings("li").removeClass("active");
    });

后台请求数据：

处理后，页面展示：