高效实现多级关联下拉选择框
2007-12-09 09:55:32 来源:WEB开发网多级关联下拉选择框的实现我看过网上的一些文章,但我觉得我的方法最简单,不需要调用xml(标准化越来越近了) Dom。数据下载量也要小一些。
当时做就是考虑到选项会很多,定义关联关系的数据结构要高效,过多的下载量会使用户反感。
同时,这些定义需要在服务器端动态生成,按目前的定义方法也只要用嵌套的循环输出就非常容易实现。
再有就是通用性,灵活性。和前面提到的大作都类似了。
闲话少说,书归代码:
<BODY>
<SELECT NAME=s1><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME=s2></SELECT>
<SELECT NAME=s3></SELECT>
<SELECT NAME=s4></SELECT>
<SCRIPT LANGUAGE=JavaScript>
<!--
//选择框的名字
selector = [ s1, s2, s3, s4 ];
//选择项: 名字, 值, 子选择
menu = [
地球,1,
[
中国,86,
[
北京,BJ,
[
--,1,null
],
四川,SC,
[
成都,28,null,
乐山,,null,
攀枝花,,null,
自贡,,null,
德阳,,null,
绵阳,,null
]
],
米国,1,
[
加利福尼亚,CA,
[
旧金山,1,null,
洛杉矶,2,null
],
华盛顿,WA,
[
西雅图,seattle,null
]
]
],
火星,2,
[
大峡谷,86,
[
小山丘,BJ,
[
A地区,28,null,
B地区,,null,
C地区,,null
]
]
]
];
function wizz(level)
{
if( level == 0 )
a = menu;
else
{
str = menu;
for( i=0; i<level; i++ )
str += [ + (document.all[selector[i]].selectedIndex * 3 + 2) + ];
a = eval(str);
}
if( a == null ) return;
s = document.all[selector[level]];
i = s.length;
while( i > 0 ) s.options[--i] = null;
while( i < Math.floor(a.length/3) )
s.options[i] = Option( a[i*3], a[i++*3+1] );
s.onchange = Function(wizz( + (level+1) + ));
wizz(level+1);
}
wizz(0);
//-->
</SCRIPT>
</BODY>
</HTML>
我觉得效率还可以了,大家还有什么高招欢迎交流
技术交流 永远止境
更多精彩
赞助商链接