fredyj，你好，能否帮忙优化一下JS

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var DepartMent=new Array(
new Option("总公司","0"),
new Option("分公司1","1"),
new Option("分公司2","2"),
new Option("分公司3","3"),
new Option("分公司4","4")
);
var Dept=[];
Dept[0]=new Array(
new Option("部门1","1"),
new Option("部门2","2")
);
Dept[1]=new Array(
new Option("部门3","3"),
new Option("部门4","4"),
new Option("部门5","5"),
new Option("部门6","6")
);
var User=[];
User[1]=new Array(
new Option("用户1","000101"),
new Option("用户2","000102")
);
User[2]=new Array(
new Option("用户3","000103")
);
User[3]=new Array(
new Option("用户11","000111"),
new Option("用户12","000112")
);
User[4]=new Array(
new Option("用户6","000106"),
new Option("用户7","000107"),
new Option("用户8","000108"),
new Option("用户9","000109"),
new Option("用户10","000110")
);
User[5]=new Array(
new Option("用户4","000104"),
new Option("用户5","000105")
);
User[6]=new Array(
new Option("用户13","000113"),
new Option("用户14","000114"),
new Option("用户15","000115"),
new Option("用户16","000116"),
new Option("用户17","000117"),
new Option("用户18","000118")
);
window.onload=function()
{
  var i;
  var comp=document.getElementById("comp");
  comp.options.length=0;
  for(i=0;i<DepartMent.length;i++)
  {
    comp.options.add(DepartMent[i]);
  }
  
  var dept=document.getElementById("dept");
  dept.options.length=0;
  for(i=0;i<Dept[0].length;i++)
  {
    dept.options.add(Dept[0][i]);
  }
  
  var user=document.getElementById("user");
  user.options.length=0;
  for(i=0;i<User[1].length;i++)
  {
    user.options.add(User[1][i]);
  }
}
function getSecond(v)
{
  var FirstId="";
  v=parseInt(v,10);
  if(v>0)
    v=1;
  var dept=document.getElementById("dept");
  dept.selectedIndex=0;
  dept.options.length=0;
  for(var i=0;i<Dept[v].length;i++)
  {
    if(i==0)
      FirstId=Dept[v][i].value;      
    dept.options.add(Dept[v][i]);
  }
  getThree(FirstId);
}
function getThree(v)
{
  v=parseInt(v,10);
  var user=document.getElementById("user");
  user.options.length=0;
  for(var i=0;i<User[v].length;i++)
  {
     user.options.add(User[v][i]);
  }
}
</script>
<title>三级联动下拉</title>
<style type="text/css">
<!--
select {
    width: 100px;
}
-->
</style>
</head>
<body>
<select name="comp" id="comp" onchange="getSecond(this.value)">
</select><select name="dept" id="dept" onchange="getThree(this.value)">
</select><select name="user" id="user">
</select>
</body>
</html>

解决方案 »

  1.   

    USERINF.XML里面的数据有2000条左右,速度会慢么？
      

  2.   

    我觉得能实现效果就可以了，没做优化其实是我理解的不很深刻，没那个能力，LOL~~呵呵 基本上你看下面的几张图片就能看出来，时间上还是可以接受的，远程的还没测试，都是本地的。ie7请求http://docs.google.com/View?docid=dffqkh7w_4ckw9stdrff2请求
    http://docs.google.com/Doc?id=dffqkh7w_2hfsgx6dfff2_profile 执行时间
    http://docs.google.com/Doc?id=dffqkh7w_0fbxmbzf7
      

  3.   

    user数据量太大的话,可以考虑用
    js数组+ajax来获取数据公司和部门的数据生成js数组,user的话通过ajax来取数据.
      

  4.   

    index.htm
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript">
    var obj=null;
    function createObj()
    {
      if(window.XMLHttpRequest)
        return new XMLHttpRequest();
      else if(window.ActiveXObject)
      {
        var kys=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
        var o;
        for(var i=0;i<kys.length;i++)
        { 
          try
          {
            o=new ActiveXObject(kys[i]);
            return o;
          }catch(e){}
        }
      }
    }
    function Hanlder()
    {
      if(obj.readyState==4)
      {
         if(obj.status==200)
         {
           
           parseXML(obj.responseXML);
         }
         else
           alert("发生错误！");
      }
    }
    function parseXML(xmlDoc)
    {
       var n=document.getElementById("UserNote");
       var user=document.getElementById("user");   
       var err=xmlDoc.getElementsByTagName("err");
       if(err.length>0)
       {
         switch(err[0].firstChild.nodeValue)
         {
            case "1":          
              n.innerHTML='公司id或者部门id出错！';
              user.options.length=0;
              return;
            case "2":
              user.options.length=0;
              n.innerHTML='数据不存在！';
              return;
         }
       }
       n.style.display="none";
       user.style.display="";
       var id=xmlDoc.getElementsByTagName("id")[0].firstChild.nodeValue;
       User[id]=new Array();
       var us=xmlDoc.getElementsByTagName("u");   
       user.options.length=0;
       for(var i=0;i<us.length;i++)
       {
         var op=new Option(us[i].getAttribute("name"),us[i].getAttribute("id"));
         User[id].push(op);
         user.options.add(op);
       }
    }
    var DepartMent=new Array(
    new Option("总公司","0"),
    new Option("分公司1","1"),
    new Option("分公司2","2"),
    new Option("分公司3","3"),
    new Option("分公司4","4")
    );
    var Dept=[];
    Dept[0]=new Array(
    new Option("部门1","1"),
    new Option("部门2","2")
    );
    Dept[1]=new Array(
    new Option("部门3","3"),
    new Option("部门4","4"),
    new Option("部门5","5"),
    new Option("部门6","6")
    );
    var User=[];//用来保存已经下载了的用户数据，这样就不需要重复从服务器下载了
    window.onload=function()
    {
      var i;
      var comp=document.getElementById("comp");
      comp.options.length=0;
      for(i=0;i<DepartMent.length;i++)
      {
        comp.options.add(DepartMent[i]);
      }
      
      var dept=document.getElementById("dept");
      dept.options.length=0;
      for(i=0;i<Dept[0].length;i++)
      {
        dept.options.add(Dept[0][i]);
      } 
      getUserData("readuser.aspx?did=0&id=1&ts="+escape(new Date().toString()));
    }
    function getUserData(url)
    {
      obj=createObj();
      if(obj)
      {
        obj.open("get",url,true);
        obj.onreadystatechange=Hanlder;
        obj.send(null);
      }
      else alert("创建AJAX对象失败！");
    }
    function getSecond(v)
    {
      var FirstId="";
      v=parseInt(v,10);
      if(v>0)
        v=1;
      var dept=document.getElementById("dept");
      dept.selectedIndex=0;
      dept.options.length=0;
      for(var i=0;i<Dept[v].length;i++)
      {
        if(i==0)
          FirstId=Dept[v][i].value;      
        dept.options.add(Dept[v][i]);
      }
      getThree(v,FirstId);
    }
    function getThree(cid,v)
    {
      var NowUser=User[cid+"-"+v];
      var n=document.getElementById("UserNote");
      var user=document.getElementById("user");
      if(NowUser==null)
      {
        user.style.display="none";    
        n.style.display="";
        n.innerHTML="正在加载用户数据......";
        getUserData("readuser.aspx?did="+cid+"&id="+v+"&ts="+escape(new Date().toString()));
      }
      else
      {
        n.style.display="none";
        user.style.display="";
        user.options.length=0;
        for(var i=0;i<NowUser.length;i++)
        {
           user.options.add(NowUser[i]);
        }
      }
    }
    </script>
    <title>三级联动下拉</title>
    <style type="text/css">
    <!--
    select {
        width: 100px;
    }
    -->
    </style>
    </head>
    <body>
    <select name="comp" id="comp" onchange="getSecond(this.value)">
    </select><select name="dept" id="dept" onchange="getThree(document.getElementById('comp').value,this.value)">
    </select><select name="user" id="user" style="display:none">
    </select><span id="UserNote" style="color:red">正在加载用户数据......</span>
    </body>
    </html>
    readuser.aspx
    <%@ Page Language="C#" Debug="true" ResponseEncoding="gb2312"%>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            string ReturnXml = "<?xml version='1.0' encoding='gb2312'?><info>";
            string deptId = (Request.QueryString["id"] + "").Trim();
            string dId = (Request.QueryString["did"] + "").Trim();
            if (dId == ""||deptId=="")
            {
                ReturnXml += "<err>1</err></info>";
                WriteXML(ReturnXml);
            }
            else
            {
                try
                {
                    Int32.Parse(dId);
                    Int32.Parse(deptId);
                }
                catch
                {
                    ReturnXml += "<err>1</err></info>";
                    WriteXML(ReturnXml);
                }
            }
            System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
            doc.Load(Server.MapPath("user.xml"));
            System.Xml.XmlNodeList NodeList = doc.SelectNodes("userinf/city[@deptid=" + deptId + " and @departmentid="+dId+"]");
            if (NodeList.Count == 0)
            {
                ReturnXml += "<err>2</err>"; 
            }
            else
            {
                ReturnXml += "<id>"+dId+"-"+deptId+"</id>";
                for (int i = 0; i < NodeList.Count; i++)
                {
                    ReturnXml += "<u id='" + NodeList[i].Attributes["id"].Value + "' name='" + NodeList[i].Attributes["name"].Value + "'/>";
                }
            }
            ReturnXml += "</info>";
            NodeList = null;
            doc = null;
            WriteXML(ReturnXml);
        }
        private void WriteXML(string XMLStr)
        {
            Response.Clear();
            Response.ContentType = "text/xml;charset=gb2312;";
            Response.Write(XMLStr);
            Response.End(); 
        }
    </script>