高效实现多级关联下拉选择框

　2007-12-09 09:55:32　来源：WEB开发网　　　

核心提示： 多级关联下拉选择框的实现我看过网上的一些文章，但我觉得我的方法最简单，高效实现多级关联下拉选择框，不需要调用xml(标准化越来越近了) Dom，数据下载量也要小一些，和前面提到的大作都类似了，需要JavaScript才能正确显示闲话少说，当时做就是考虑到选项会很多，定义关联关系的数据结构要高效

　 多级关联下拉选择框的实现我看过网上的一些文章，但我觉得我的方法最简单，不需要调用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);
}