站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题多级关联下拉选择框的高效实现(想用“最优”的,还是不敢)

多级关联下拉选择框的高效实现(想用“最优”的,还是不敢)

摘要: 多级关联下拉选择框的高效实现(想用“最优”的,还是不敢)


偶然看见一篇《现利用xml数据岛实现多级关联下拉选择框的做法》

思路居然和我前几天做的不谋而合。但是我觉得我的方法更简单,不需要调用XML Dom。数据下载量也要小一些。

当时做就是考虑到选项会很多,定义关联关系的数据结构要高效,过多的下载量会使用户反感。

同时,这些定义需要在服务器端动态生成,按目前的定义方法也只要用嵌套的循环输出就非常容易实现。

再有就是通用性,灵活性。和前面提到的大作都类似了。

<select name=s1><option selected>需要JavaScript才能正确显示</option></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 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>
<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 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>

我觉得效率还可以了,大家还有什么高招欢迎交流 wizz@21cn.com

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 利用Wipe等ActiveX技术,实现n(n>>2)幅图片轮换擦洗显示
后一篇: Javascript技术实现真正的网上试听