将树状结构转换为下拉框，供用户进行选择

需求：

① 给定一个数组

② 数组中的每个元素均为树结构上的一个节点

③ 除root节点外，其他每个结点，均有一个字段，用于记录直接父节点的id

④ root节点以下的每个层次中，节点的数量不限

树结构如下图：

 

 

⑤ 要求实现： 将上述树状图中的每个节点作成下拉框中的一个option供用户进行选择，效果图如下：

    
 实现代码：

/**
 * build all department options
 * 
 * @param allDept
 *            all department info
 */
function buildDept(allDept) {
    var res = "";
    var idx;
    var rootDept = null;
    // find the root department
    for (idx = 0; idx < allDept.length; idx++) {
        if (allDept[idx].parent == null) {
            rootDept = allDept[idx];
            break;
        }
    }
    // if the root department was found
    if (rootDept) {
        res += "<option value='" + rootDept.id + "'>" + rootDept.name + "</option>";
        var loopedId = [];
        loopedId[loopedId.length] = rootDept.id;

        (function(node, level) {
            var idx;
            var deptTmp;
            for (idx = 0; idx < allDept.length; idx++) {
                deptTmp = allDept[idx];
                if ($.inArray(deptTmp.id, loopedId) == -1) {
                    if (deptTmp.parent.id == node.id) {
                        loopedId[loopedId.length] = deptTmp.id;
                        res += createDeptOption(deptTmp, level);
                        arguments.callee(deptTmp, (level + 1));
                    }
                }
            }
        })(rootDept, 1);
    }
    return res;
}

 

/**
 * create a option for a department
 * 
 * @param node
 *            a department node
 * @param level
 *            the department level
 */
function createDeptOption(node, level) {
    var prefix = "|";
    var sep = "-";
    var option = "<option value='" + node.id + "'>" + prefix;
    var idx;
    for (idx = 0; idx < (2 * level - 1); idx++) {
        option += sep;
    }
    option += node.name + "</option>";
    return option;
}

重点是上面第一个方法，我简要说明一下：

① 找出唯一的那个root节点。即没有父节点的那个节点。通过“allDept[idx].parent == null”来判断即可。

② 从root结点开始，往叶子节点方向，递归查找每个节点。注意一下“ arguments.callee(deptTmp, (level + 1));”的用法，这个是关键。

PS：我这里使用了一个 loopedId 数组来将所有已经遍历过的储存起来，下次循环的时候，先判断一下有没有被遍历过，如果有的话，则跳过。 但是我觉得这个方法有点笨拙，可我一时又想不到其他方法。如果有哪位兄弟有好的解决方案的话，可以留一下言，谢谢！

 

以上只是拼凑  所有  option 的过程，要想放到某个select中的话，可以直接使用 JQuery 的 append 方法来实现，如： $("#selectID").append(str);