敬业的IT人 >> 网站建设 >> Web编程 >> JavaScript >> 高效实现多级关联下拉选择框

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

敬业的IT人互联网佚名 2008-1-10 16:25:34

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

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

最新文章: javascript连接数据库[01-10]; 页面上的javascript判断[01-10]; 仿xp下拉菜单[01-10]; 用JavaScript编写小游戏－扫雷[01-10]; 动态添加删除行的HTC行为组件[01-10]; javascript小玩意－只能输入汉字的输入框[01-10]

相关文章