87,907
社区成员
发帖
与我相关
我的任务
分享如何实现点击选择select时不闪动，求js高手
<!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高手给些思路。
...全文
请发表友善的回复…
发表回复
t150ckh 2011-04-25
- 打赏
- 举报
高手现身吧
t150ckh 2011-04-25
- 打赏
- 举报
继续等待。难道没有其它方案了？
qingYun1029 2011-04-25
- 打赏
- 举报
在ie6下用ajax做级联查询也有这个“闪动”效果。。。
我的解决办法是在页面加载的时候就把需要获取的数据都加载到页面上一个隐藏标签上(当然，你要考虑数据大小什么的就自己想办法了。)然后在前台直接用js操作就好了。这样我避免掉了那个“闪动”效果。。
LZ可以试试！
我的解决办法是在页面加载的时候就把需要获取的数据都加载到页面上一个隐藏标签上(当然，你要考虑数据大小什么的就自己想办法了。)然后在前台直接用js操作就好了。这样我避免掉了那个“闪动”效果。。
LZ可以试试！
t150ckh 2011-04-25
- 打赏
- 举报
[Quote=引用 3 楼 t5500 的回复:]
只能在IE下运行，在IE中没看到"闪烁"。
[/Quote]
怎么就没有人懂的我意思呢，比方第一级后有了第二级select 接下在第一级选择其它选项时，他会重新加载两个select， 我要的是只加载数据。
只能在IE下运行，在IE中没看到"闪烁"。
[/Quote]
怎么就没有人懂的我意思呢，比方第一级后有了第二级select 接下在第一级选择其它选项时，他会重新加载两个select， 我要的是只加载数据。
t150ckh 2011-04-25
- 打赏
- 举报
[Quote=引用 6 楼 gxzh0817 的回复:]
我从数据库中每次取值（除了首次加载）都不会闪啊！
[/Quote]
呵呵，看下原码就知道，每次一点都会重新加裁一次，如何数据多点就会出现点一下要小小的闪一下。
我从数据库中每次取值（除了首次加载）都不会闪啊！
[/Quote]
呵呵，看下原码就知道，每次一点都会重新加裁一次，如何数据多点就会出现点一下要小小的闪一下。
sssschenyi 2011-04-24
- 打赏
- 举报
Firefox/3.6.15 看不到下拉框
IE6确实有这情况， 不好搞。
IE6确实有这情况， 不好搞。
gxzh0817 2011-04-23
- 打赏
- 举报
我从数据库中每次取值（除了首次加载）都不会闪啊！
hch126163 2011-04-23
- 打赏
- 举报
window.onload = function() {
cc_DrawLists("ClassID",46,2,"","");
}
这样 ff 就能运行了！
至于闪动问题！
你第一个select 不要每次都刷新！它始终都没变！！！
你只需要动态创建其它的select 就好了
拼接字符串，用 数组
var arr=[];
arr.push("1");
arr.push(" 2");
..
arr.join("");
这样性能会高很多！
cc_DrawLists("ClassID",46,2,"","");
}
这样 ff 就能运行了！
至于闪动问题！
你第一个select 不要每次都刷新！它始终都没变！！！
你只需要动态创建其它的select 就好了
拼接字符串，用 数组
var arr=[];
arr.push("1");
arr.push(" 2");
..
arr.join("");
这样性能会高很多！
knightzhuwei 2011-04-22
- 打赏
- 举报
要不换个电脑试试？
乌镇程序员 2011-04-22
- 打赏
- 举报
只能在IE下运行，在IE中没看到"闪烁"。
极湖 2011-04-22
- 打赏
- 举报
初始化的代码最好这样写：
window.onload = function() {
cc_DrawLists("ClassID",46,2,"","");
}
其实这样的三级菜单，用不了这么多的代码，如果你熟悉 JSON，数据可以组织得更好，起码有层次，一后修盖起来也方便。
至于闪烁，可能和浏览器有关，可以用CSS解决。
window.onload = function() {
cc_DrawLists("ClassID",46,2,"","");
}
其实这样的三级菜单，用不了这么多的代码，如果你熟悉 JSON，数据可以组织得更好，起码有层次，一后修盖起来也方便。
至于闪烁，可能和浏览器有关，可以用CSS解决。
tang3567 2011-04-22
- 打赏
- 举报
视觉上有什么问题？
很正常啊，没什么不好啊！
很正常啊，没什么不好啊！
