<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" defer="defer">
   var cc_Array = new Array(
   [0,1,"企业文化"],
   [1,4,"规章制度"],
   [0,28,"网站公告"],
   [0,33,"建筑开发"],
   [0,34,"建筑产品"],
   [0,35,"工程实例"],
   [0,36,"企业荣誉"],
   [0,37,"企业资质"],
   [35,38,"装饰工程"],
   [35,39,"小区园林"],
   [35,40,"建筑工程"],
   [35,41,"民用住宅"],
   [34,42,"防盗门"],
   [34,43,"陶粒气块"],
   [39,44,"电线圈"],
   [39,45,"塑钢窗"],
   [34,46,"苯板"],
   [33,47,"开发实例"],
   [33,48,"热卖楼盘"]);
  
   var cc_AllID="";     //所有类别ID集合
   var cc_Value=""; // 存储最终取得的类别的值
   var cc_Tips="选择分类";    //提示字符
  
   function cc_IsNextClass(ClassID){
       for(var i=0;i<cc_Array.length;i++){
        if(cc_Array[i][0]==ClassID){return true;}
       }
       return false;
   }
  
   function cc_getParentId(ClassID){
       for(var i=0;i<cc_Array.length;i++){
           if(cc_Array[i][1]==ClassID){return cc_Array[i][0];}
       }
       return -1;
   }
  
   function cc_DrawLists(SelectName,ClassID,Mode,Html,TheOption){
    var ParentID=cc_getParentId(ClassID);
    var TheSelected="";
    var HtmlCode="";
    cc_AllID+="," + ClassID;
    ParentID=(ParentID==0) ? -1:ParentID;
    HtmlCode="<select name=\""+SelectName+"_PPST\" id=\""+SelectName+"_PPST\" onChange={javascript:cc_DrawLists(\""+SelectName+"\",this.value.split(\"|\")[0],"+Mode+",\"\",\""+TheOption+"\")}>\n";
    HtmlCode+="<option value=\""+ParentID+"\">"+cc_Tips+"</option>\n";
    ParentID=(ParentID==-1) ? 0:ParentID;
    for(var i=0;i<cc_Array.length;i++){
     if(cc_Array[i][1]==ClassID){
         TheSelected=" selected";
       switch(Mode){
       case 0:
        cc_Value+="," + cc_Array[i][1];
        break;
       case 1:
        cc_Value+="," + cc_Array[i][2];
        break;
       case 2:
        cc_Value+="," + cc_Array[i][1] + "|" + cc_Array[i][2];
        break;
       }
}else{
  TheSelected="";
}
      if(cc_Array[i][0]==ParentID){
  HtmlCode+="<option value=\""+cc_Array[i][1]+"|"+cc_Array[i][2]+"\""+TheSelected+">"+cc_Array[i][2]+"</option>\n";}
     }
     HtmlCode+="</select>\n"+Html
     if(ParentID==0){
      if(cc_IsNextClass(cc_AllID.split(",")[1])){
       HtmlCode+="<select name=\""+SelectName+"_PPST\" id=\""+SelectName+"_PPST\" onChange={javascript:cc_DrawLists(\""+SelectName+"\",this.value.split(\"|\")[0],"+Mode+",\"\",\""+TheOption+"\")}>\n";
      HtmlCode+="<option value=\""+ParentID+"\">"+cc_Tips+"</option>\n";
for(var i=0;i<cc_Array.length;i++){
if(cc_Array[i][0]==cc_AllID.split(",")[1]){
HtmlCode+="<option value=\""+cc_Array[i][1]+"|"+cc_Array[i][2]+"\">"+cc_Array[i][2]+"</option>\n";
}
}
HtmlCode+="</select>\n"
      }
cc_AllID="";
var Value=cc_Value.split(",")[1];
if(Value==null) Value="";
HtmlCode+="<input type=\"hidden\" name=\""+SelectName+"\" id=\""+SelectName+"\" value=\""+Value+"\" />"
cc_Value="";
document.getElementById("cc_Container389_"+SelectName).innerHTML=HtmlCode;
     }else{
     cc_DrawLists(SelectName,ParentID,Mode,HtmlCode,TheOption);
     }
   }
//根  
//cc_DrawLists("ClassID",-1,0,"","");
//定位到栏目
cc_DrawLists("ClassID",46,2,"","");
//栏目的值
//alert(document.getElementById("ClassID").value);</script>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="Table"><form action="?Action=AddNews&NewsID=" method="post" onsubmit="return CheckAddNewsSubmit(this)"><tr>
    <td width="15%" class="right">信息分类:&nbsp;</td>
     <td width="85%" class="left"><span id="cc_Container389_ClassID"></span>
</td>
</tr></form>
</table>
</body>
</html>
做了下无限级联的select ,但一个问题是每次点击都会重新加载select,在视觉上很不好,求js高手给些思路。

解决方案 »

  1.   

    初始化的代码最好这样写:window.onload = function() {
    cc_DrawLists("ClassID",46,2,"","");
    }其实这样的三级菜单,用不了这么多的代码,如果你熟悉 JSON,数据可以组织得更好,起码有层次,一后修盖起来也方便。至于闪烁,可能和浏览器有关,可以用CSS解决。
      

  2.   

    只能在IE下运行,在IE中没看到"闪烁"。
      

  3.   

    window.onload = function() {
    cc_DrawLists("ClassID",46,2,"","");
    }这样 ff 就能运行了!至于闪动问题!你第一个select 不要每次都刷新!它始终都没变!!!
    你只需要动态创建其它的select 就好了拼接字符串,用 数组var arr=[];
    arr.push("1");
    arr.push(" 2");
    ..
    arr.join("");这样性能会高很多!
      

  4.   

    Firefox/3.6.15  看不到下拉框
    IE6确实有这情况, 不好搞。
      

  5.   


    怎么就没有人懂的我意思呢,比方第一级后有了第二级select 接下在第一级选择其它选项时,他会重新加载两个select, 我要的是只加载数据。
      

  6.   

    在ie6下用ajax做级联查询也有这个“闪动”效果我的解决办法是在页面加载的时候就把需要获取的数据都加载到页面上一个隐藏标签上(当然,你要考虑数据大小什么的就自己想办法了。)然后在前台直接用js操作就好了。这样我避免掉了那个“闪动”效果。。LZ可以试试!