WEB开发网
开发学院网页设计JavaScript 高效实现多级关联下拉选择框 阅读

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

 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);
}

wizz(0);

//-->
</SCRIPT>

</BODY>
</HTML>

我觉得效率还可以了,大家还有什么高招欢迎交流
技术交流 永远止境


Tags:高效 实现 多级

编辑录入:coldstar [复制链接] [打 印]
赞助商链接