js简单的二级联动,但是不好用,GGJJ们当小弟我看看那错了
日期：2014-05-20 浏览次数：20459 次
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)
<!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)
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
