bb.htm
<html>
<head>
<title>修改组信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="addrStyle" type="text/css">
</head>
<script src="aa.js"></script>
<body bgcolor=#F0F2E4 topmargin=5 marginheight=5 leftmargin=0 marginwidth=0>
<select name=topid>
<script type="text/javascript">
var tree = new tree();
var root = new root("000000","您还没分组","","","");
tree.addRoot(root);
tree.addNode(new node("01","aaa","00","1",""));
tree.addNode(new node("02","bbb","00","0",""));
tree.addNode(new node("03","ccc","00","0",""));
tree.addNode(new node("04","ddd","01","1",""));
tree.addNode(new node("05","eee","04","1",""));
tree.addNode(new node("06","fff","05","0",""));
……………………
tree.drawRoot();
tree.drawNodes(tree.root);
</script>
</select>
上面的代码就是想实现一下效果
<select name=topid>
<option value="01">aaa</option>
<option value="04">-ddd</option>
<option value="05">--eee</option>
<option value="06">---fff</option>
<option value="02">bbb</option>
<option value="02">ccc</option>
</select>

解决方案 »

  1.   

    添加了mydraw函数,另稍作修改
    aa.js
    function tree() {
    this.length = 0;
    this.nodes = new Array();
    this.addNode = addNode;
    this.addRoot = addRoot;
    this.drawRoot = drawRoot;
    this.drawFrontLine = drawFrontLine;
    this.drawNode = drawNode;
    this.drawNodes = drawNodes;
    this.getParent = getParent;
    this.setOtherIsLast = setOtherIsLast;
    }function root(id,name,parentId,type,str) {
    this.id = id; 
    this.name = name;
    this.parentId = null;
    this.type = "root";
    this.str = str;
    }function addRoot(root) {
    this.root = root;
    this.length = 1;
    this.nodes[0] = root;
    }function node(id,name,parentId,type,str) {
    this.id = id;
    this.name =name;
    this.parentId = parentId;
    this.type = type;
    this.isLast = false;
    this.str =str;
    }/** 判断一个节点是否有父节点,如果有则返回其父节点,如果没有返回null */
    function getParent(node) {
    for (var i=0;i<this.length;i++)
    {
    if (this.nodes[i].id == node.parentId) 
    {
    return this.nodes[i];
    }
    }
    return null;
    }/** 当添加一个新节点后,将与它处在同一层的其它元素的isLast标志设置为false */
    function setOtherIsLast(node) {
    for (var i=1;i<this.length;i++) //i=1,表示不包括根节点在内的循环
    {
    if (this.nodes[i].parentId == node.parentId && this.nodes[i].isLast) //如果找到父节点相同的,并且isLast为true的节点
    {
    this.nodes[i].isLast = false; //设置该节点的isLast为false
    return true;
    }
    }
    return false;
    }/** 为树的节点组nodes[]添加一个新的节点 */
    function addNode(node) {
    if (this.getParent(node) != null) //如果有父节点
    {
    this.setOtherIsLast(node); //设置同层中的其他元素为非末节点
    node.isLast = true; //设置本节点为末节点
    this.nodes[this.length] = node; //添加该节点到节点组nodes[]
    this.length++; //节点数加1
    } else {
    alert("没有找到该节点的父节点,这是一个非法节点!");
    }
    }/** 画出根节点 */
    function drawRoot() {
    document.write("<option value='"+this.root.id+"'>"+this.root.name+"</option>");
    }/** 画出节点 */
    function drawNode(node) {
    this.drawFrontLine(node);
    if (node.type == "1")
    {   
    document.write("<option value='"+node.id+"'>"+node.name+"</option>");
    } else {
    document.write("<option value='"+node.id+"' id='"+node.id+"'>-"+node.name+"</option>");
    }
    }/** 画出整个节点组 */
    function drawNodes(node) {
    for (var i=1;i<this.length;i++)
    {
    if (this.nodes[i].parentId!=null && this.nodes[i].parentId == node.id)
    {
    this.drawNode(this.nodes[i]); //画出节点
    this.drawNodes(this.nodes[i]); //递归画出整个节点组的节点
    }
    }
    }function drawFrontLine(node) {
    var tempStr = "";
    for (var i=1;i<this.length;i++)
    {
    if (this.nodes[i].id == node.parentId)
    {
    this.drawFrontLine(this.nodes[i]);
    }
    }
    }function mydraw()
    {
    mytext="";
    for (i=2;i<document.all.topid.options.length;i++)
    {
    if(document.all.topid.options[i].text.substring(0,1)=="-")
    {
    document.all.topid.options[i].text=mytext+document.all.topid.options[i].text;
    mytext+="-";
    }
    else
    mytext="";
    }
    }bb.htm
    <html>
    <head>
    <title>修改组信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <link rel="stylesheet" href="addrStyle" type="text/css">
    </head>
    <script src="aa.js"></script>
    <body bgcolor=#F0F2E4 topmargin=5 marginheight=5 leftmargin=0 marginwidth=0>
    <select name=topid>
    <script>
    var tree = new tree();
    var root = new root("00","您还没分组","","","");
    tree.addRoot(root);
    tree.addNode(new node("01","aaa","00","1",""));
    tree.addNode(new node("02","bbb","00","1",""));
    tree.addNode(new node("03","ccc","00","1",""));
    tree.addNode(new node("04","ddd","01","0",""));
    tree.addNode(new node("05","eee","04","0",""));
    tree.addNode(new node("06","fff","05","0",""));
    tree.addNode(new node("07","ggg","02","0",""));
    tree.drawRoot();
    tree.drawNodes(tree.root);
    mydraw();
    </script>
    </select>
    上面的代码就是想实现以下效果
    <select name=topid>
    <option value="01">aaa</option>
    <option value="04">-ddd</option>
    <option value="05">--eee</option>
    <option value="06">---fff</option>
    <option value="02">bbb</option>
    <option value="02">ccc</option>
    </select>