多级下拉框的实现

var DataList = [];/* 后端传回的下拉框数据放在这里 */
var isopen = [];/* 用来存放下拉框的展开或者是收缩状态 */
/* lessSonImg方法是在初始化的时候调用，目的是把所有的子数据收起 */
lessSonImg = function () {
    for (var i = 0; i < DataList.length; i++) {
        var spliceIndex = isopen.indexOf(i);
        isopen.splice(spliceIndex, 1);
    }
};
openChildenAry = function (n) {
    var index = n;
    /*  如果第N个数据没有展开，那么就将isopen数组里的第n个值设为n，
        如果第N个数据已经展开，那么就将isopen数组里的第n个值设为清空。
    */
    if (isopen.indexOf(index) == -1) {
        isopen.push(index);
    } else {
        var spliceIndex = isopen.indexOf(index);
        isopen.splice(spliceIndex, 1);
    }
    //将节点展开(收起)后，接下来判断节点是否有子节点，有的话也要相应的展开(收起)
    /* 如果节点是展开状态，循环其子数据(即为childAry属性)，将其子数据循环放在节点后，这样VUE渲染的时候子数据就会显示出来了 */
    if (isopen.indexOf(index) > -1) {
        for (var i = 0; i < DataList[index].childAry.length; i++) {
            var nowData = DataList[index].childAry[i];
            DataList.splice(index + i + 1, 0, nowData);
        }
    }
    /* 如果节点是展开状态，循环其子数据(即为childAry属性)，将其子数据循环放在节点后，这样VUE渲染的时候子数据就会显示出来了 */
    else if (!isopen.indexOf(index) > -1) {
        var lvSum = 0;/* 子节点的数量 */
        var selflv = DataList[index].lv;/* 当前节点的等级 */
        /* 如果是收缩的话，以当前节点为初始值开始向后循环，一直循环到节点的等级和当前节点的等级一直或者更高。(即循环到兄弟节点或者是父节点 )*/
        for (var i = index + 1; i < DataList.length; i++) {
            /* 因为我是以0作为根节点的等级，所以值越大等级越低。当循环的值大于selflv的时候，代表循环的等级小于当前节点的等级。 */
            if (parseInt(selflv) < parseInt(DataList[indesx].lv)) {
                lvSum += 1;
            } else {
                break;
            }
        }
        /* 循环好后统一将子节点清空 */
        DataList.splice(index + 1, lvSum);
    }
};
/* 我这个js使用的是vue框架，如果你用的react的话代表的变动应该也是不大的。 */