动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   网页设计 → 阅读文章

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

作者:未知 来源:CSDN 
阅读 224 人次 , 2008-5-14 15:38:00 

<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优化  
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:Javascript技术实现真正的网上试听
· 下一篇:利用Wipe等ActiveX技术,实现n(n>>2)幅图片轮换擦洗显示
· 一个简单的俄罗斯方块脚本
· 韩国网站的设计好在哪里
· 实现浏览器全屏窗口的几种方法
· GOLIVE5.0教程(二十)
· 网页经典代码(三)


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077