二级联动代码
<!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=utf-8" />
<title>两级联动</title>
<script type="text/javascript" language="javascript" >
/** 第二个下拉列表框*/
var section1=new Array();
section1[0]=["1.1 脚本语言","section1.1"];
section1[1]=["1.2 javaScript的作用","section1.2"];
section1[2]=["1.3 javaScript的版本与支持","section1.3"];
var section2=new Array();
section2[0]=["2.1 常量","section2.1"];
section2[1]=["2.2 变量","section2.2" ];
section2[2]=["2.3 数据类型","section2.3"];
var section3=new Array();
section3[0]=["3.1 表达式","section3.1"];
section3[1]=["3.1 操作数","section3.2"];
section3[2]=["3.2 运算符介绍","section3.3"];
/** 第一个下拉列表框*/
var chapterArr=new Array();
chapterArr[0]=["第1章 javaScript基础 ","chapter1",section1];
chapterArr[1]=["第2章 常量、变量与数据类型 ","chapter2",section2];
chapterArr[2]=["第3章 表达式与运算符 ","chapter2",section3];
function setSection(chapter)
{
for (var i=document.myForm.section.length-1;i>-1;i--)
{
document.myForm.section.remove(i);
}//移除第二个下拉列表的所有选项
var arr= chapterArr[chapter][2];
for(var i=0;i<arr.length;i++){
document.forms[0].section.options[i]=new Option(arr[i][0],arr[i][1]);
}//初始化第二个下拉列表
for (var i=0; i < chapterArr.length; i++) {
document.forms[0].chapter.options[i]=new Option(chapterArr[i][0],chapter[i][1]);
}//初始化第一个下拉列表
}
setSection(0);//初始化表单
</script>
</head>
<body>
<form name="myForm">
<select name="chapter" onchange="setSection(this.selectedIndex)">
</select>
<select name="section">
</select>
</form>
</body>
</html>
这个代码的意思是想实现二级联动菜单。
为什么会弹出错误：
网页错误详细信息
用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
时间戳: Sun, 13 May 2012 12:21:09 UTC
消息: 'document.myForm.section' 为空或不是对象行: 31
字符: 12
代码: 0
URI: http://localhost/0/dance%20of%20life/javascript/biaodan/erji%20liangdong%20xiala%20leibiao.html
我明明已经写了名为section的下拉表单，为什么会弹出这个错误？
[解决办法]
function setSection(chapter) {
for (var i = document.myForm.section.length - 1; i > -1; i--) {
document.myForm.section.remove(i);
} //移除第二个下拉列表的所有选项
var arr = chapterArr[chapter][2];
for (var i = 0; i < arr.length; i++) {
document.forms[0].section.options[i] = new Option(arr[i][0], arr[i][1]);
} //初始化第二个下拉列表
for (var i = 0; i < chapterArr.length; i++) {
document.forms[0].chapter.options[i] = new Option(chapterArr[i][0], chapterArr[i][1]);
} //初始化第一个下拉列表
}
window.onload = function() {
setSection(0); //初始化表单
}
[解决办法]
<!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=utf-8" /><title>两级联动</title><script type="text/javascript" language="javascript" >/** 第二个下拉列表框*/var section1=new Array(); section1[0]=["1.1 脚本语言","section1.1"]; section1[1]=["1.2 javaScript的作用","section1.2"]; section1[2]=["1.3 javaScript的版本与支持","section1.3"];var section2=new Array(); section2[0]=["2.1 常量","section2.1"]; section2[1]=["2.2 变量","section2.2" ]; section2[2]=["2.3 数据类型","section2.3"]; var section3=new Array(); section3[0]=["3.1 表达式","section3.1"]; section3[1]=["3.1 操作数","section3.2"]; section3[2]=["3.2 运算符介绍","section3.3"];/** 第一个下拉列表框*/ var chapterArr=new Array(); chapterArr[0]=["第1章 javaScript基础 ","chapter1",section1]; chapterArr[1]=["第2章 常量、变量与数据类型 ","chapter2",section2]; chapterArr[2]=["第3章 表达式与运算符 ","chapter2",section3]; function setSection(chapter) { for (var i=document.myForm.section.length-1;i>-1;i--){document.myForm.section.remove(i);}//移除第二个下拉列表的所有选项 var arr= chapterArr[chapter][2]; for(var i=0;i<arr.length;i++){ document.forms[0].section.options[i]=new Option(arr[i][0],arr[i][1]); }//初始化第二个下拉列表 for (var i=0; i < chapterArr.length; i++) {document.forms[0].chapter.options[i]=new Option(chapterArr[i][0],chapterArr[i][1]);}//初始化第一个下拉列表 } window.onload = function(){setSection(0);//初始化表单}</script></head><body><form name="myForm"> <select name="chapter" onchange="setSection(this.selectedIndex)"> </select> <select name="section"> </select></form> </body></html>
[解决办法]