js简单的二级联动,但是不好用,GGJJ们当我看看那错了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<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>
</head>
<body>
<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>
</body>
</html>
[解决办法]
修正如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<script language= "javascript ">
//获取一级菜单长度
var select1_len
var select2
window.onload=function()
{
select1_len = document.forms[0].s1.options.length;
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.forms[0].s2;
temp.options.length=0
for (i=0;i <select2[x].length;i++)
{
temp.options[i]=select2[x][i];
}
temp.options[0].selected=true;
}
</script>
</head>
<body>
<form id= "frm ">
<select name= "s1 " onChange= "redirec(this.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> </body>
</html>
