偶然看见一篇《现利用xml数据岛实现多级关联下拉选择框的做法》
思路居然和我前几天做的不谋而合。但是我觉得我的方法更简单，不需要调用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>
我觉得效率还可以了，大家还有什么高招欢迎交流 wizz@21cn.com
