javascript练习:8-综合练习
实现一个动态选项框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script language="javascript">
var selItem = new Array();//列表框上选择数组
for(var i=0;i<4;i++)//为每一个元素引用一个数组
{
selItem[i] = new Array();
}
selItem[0][0] = new Option("请选择"," ");//定义基本选项
selItem[1][0] = new Option("小学数学","小学数学");//选项
selItem[1][1] = new Option("小学语文","小学语文");//选项
selItem[1][2] = new Option("小学英语","小学英语");//选项
selItem[2][0] = new Option("中学数学","中学数学");//选项
selItem[2][1] = new Option("中学语文","中学语文");//选项
selItem[2][2] = new Option("中学政治","中学政治");//选项
selItem[2][3] = new Option("中学英语","中学英语");//选项
selItem[2][4] = new Option("中学物理","中学物理");//选项
selItem[3][0] = new Option("大学数学","大学数学");//选项
selItem[3][1] = new Option("大学物理","大学物理");//选项
selItem[3][2] = new Option("大学语文","大学语文");//选项
selItem[3][3] = new Option("大学英语","大学英语");//选项
selItem[3][4] = new Option("大学政治","大学政治");//选项
//事件
function onS1Change(x)
{
var temp = document.form1.select2;//列表框2引用
for(var i=0;i<selItem[x].length;i++)
{
temp.options[i] = new Option(selItem[x][i].text,selItem[x][i].value);//实例化对象
}
temp.options[0].selected = true;//显式菜单1的初始值
}
function onS2Change2(str1,str2)
{
if(str1>0)
{
switch(str1)
{
case 1:str1="小学生";break;
case 2:str1="中学生";break;
case 3:str1="大学生";break;
}
alert("您的身份是: "+str1+"\n您最喜欢的科目于是: "+str2);
}
else
alert("您没有选择身份");
}
</script>
</head>
<body>
<form name="form1" id="form1" method="post" action="">
<label>
您的身份是：<select name="select1" onchange="onS1Change(this.value)">
<option value="0">请选择</option>
<option value="1">小学生</option>
<option value="2">中学生</option>
<option value="3">大学生</optin>
</select>
你最喜欢的科目：<select name="select2"></select>
<input type="submit" name="submit" value="确定" onclick="onS2Change2(form1.select1.value,form1.select2.value);return false;" />
</label>
</form>
</body>
</html>
