实际应用:简单二级联动菜单实现"/>
JavaScript实际应用:简单二级联动菜单实现
< form name = " frm " >< select name = " s1 " onChange = " redirec(document.frm.s1.options.selectedIndex) " >
< option selected > 请选择 </ option >
< option value = " 1 " > 脚本语言 </ option >
< option value = " 2 " > 高级语言 </ option >
< option value = " 3 " > 其他语言 </ option >
</ select >
< select name = " s2 " >
< option value = " 请选择 " selected > 请选择 </ option >
</ select >
</ form >
< script language = " javascript " >
// 获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);
// 把一级菜单都设为数组
for (i = 0 ; i < select1_len; i ++ )
... {
select2[i] = new Array();
}
// 定义基本选项
select2[ 0 ][ 0 ] = new Option( " 请选择 " , " " );
select2[ 1 ][ 0 ] = new Option( " PHP " , " " );
select2[ 1 ][ 1 ] = new Option( " ASP " , " " );
select2[ 1 ][ 2 ] = new Option( " JSP " , " " );
select2[ 2 ][ 0 ] = new Option( " C/C++ " , " " );
select2[ 2 ][ 1 ] = new Option( " Java " , " " );
select2[ 2 ][ 2 ] = new Option( " C# " , " " );
select2[ 3 ][ 0 ] = new Option( " Perl " , " " );
select2[ 3 ][ 1 ] = new Option( " Ruby " , " " );
select2[ 3 ][ 2 ] = new Option( " Python " , " " );
// 联动函数
function redirec(x)
... {
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
...{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
temp.options[0].selected=true;
}
</ script >
更多推荐
JavaScript实际应用:简单二级联动菜单实现
发布评论