<!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">信息分类: </td>
<td width="85%" class="left"><span id="cc_Container389_ClassID"></span>
</td>
</tr></form>
</table>
</body>
</html>
做了下无限级联的select ,但一个问题是每次点击都会重新加载select,在视觉上很不好,求js高手给些思路。
cc_DrawLists("ClassID",46,2,"","");
}其实这样的三级菜单,用不了这么多的代码,如果你熟悉 JSON,数据可以组织得更好,起码有层次,一后修盖起来也方便。至于闪烁,可能和浏览器有关,可以用CSS解决。
cc_DrawLists("ClassID",46,2,"","");
}这样 ff 就能运行了!至于闪动问题!你第一个select 不要每次都刷新!它始终都没变!!!
你只需要动态创建其它的select 就好了拼接字符串,用 数组var arr=[];
arr.push("1");
arr.push(" 2");
..
arr.join("");这样性能会高很多!
IE6确实有这情况, 不好搞。
怎么就没有人懂的我意思呢,比方第一级后有了第二级select 接下在第一级选择其它选项时,他会重新加载两个select, 我要的是只加载数据。