当前位置: 代码迷 >> ASP.NET >> js简单的二级联动,但是不好用,GGJJ们当小弟我看看那错了
  详细解决方案

js简单的二级联动,但是不好用,GGJJ们当小弟我看看那错了

热度:9847   发布时间:2013-02-26 00:00:00.0
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)