无限极下拉菜单的js代码部分的处理

首先，先看一个简单的数据的结构：

var data = [{
            id: 1,
            address: "安徽",
            parent_id: 0
        }, {
            id: 2,
            address: "江苏",
            parent_id: 0
        }, {
            id: 3,
            address: "合肥",
            parent_id: 1
        }, {
            id: 4,
            address: "庐阳区",
            parent_id: 3
        }, {
            id: 5,
            address: "大杨镇",
            parent_id: 4
        }, {
            id: 6,
            address: "南京",
            parent_id: 2
        }, {
            id: 7,
            address: "玄武区",
            parent_id: 6
        }, {
            id: 8,
            address: "梅园新村街道",
            parent_id: 7
        }, {
            id: 9,
            address: "上海",
            parent_id: 0
        }, {
            id: 10,
            address: "黄浦区",
            parent_id: 9
        }, {
            id: 11,
            address: "外滩",
            parent_id: 10
        }, {
            id: 12,
            address: "安庆",
            parent_id: 1
        }];

从这个数据结构可知，这是一个由对象组成的数组，而且对象中的parent_id属性代表着每个对象的层级，而下一层级的对象的parent_id属性值对应着上一层级的id属性值，而最高层级的parent_id属性值为0，而我们要处理这样的数据让他们产生联系，需要采用递归让低层级的对象根据他们的parent_id属性值找到他们的上一层级并产生联系。

JS实现方式如下:

function treeHtml(arr, rootId) {
            var getHtmlFn = function(arrNodes, pid) {
                var childNodes = [];
                for (var i = 0; i < arrNodes.length; i++) {
                    if (arrNodes[i].parent_id === pid) {
                        childNodes.push(arrNodes[i]);
                    }
                }
                if (childNodes && childNodes.length > 0) {
                    var tempHTML = '<ul >';
                    for (var j = 0; j < childNodes.length; j++) {
                        tempHTML += '<li class="item' + childNodes[j].parent_id + '">' + childNodes[j].address + getHtmlFn(arr, childNodes[j].id) + '</li>'
                    }
                    tempHTML += '</ul>';
                    return tempHTML;
                }
                return '';
            }
            var treeHtml = getHtmlFn(arr, rootId);
            return treeHtml;
        }

这端js代码的大致意思是先把整个对象数组和初始的pid传入函数中，然后遍历数组，把parent_id值与传入的pid值相同的对象提取出来组成一个新数组，如果你传入的pid为0那么这个数组就是最高的那个层级的对象数组，然后遍历这个层级的数组，给这些数据拼接相应的html字符串处理，然后再调用这个函数自身，把自己的id属性值当做下一个层级的pid传入，然后可以遍历出下一个层级的对象数组，然后给下一层级的数组对象做html标签字符串拼接处理，直到这个对象所有的低层级的对象都遍历结束，然后再一层一层的递归返回tempHTML字符串。然后接续遍历最高层级的对象数组直到遍历结束，返回整个函数最后的返回值treeHtml字符串，然后就让整个对象数组产生了层级关系。

html页面代码如下：

 <div id="list"></div>
 <script>
 
 window.onload = function() {
        var divhtml = treeHtml(data, 0);
        var divList = document.querySelector('#list');
        divList.innerHTML = divhtml;
 }
</script>