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>

 

 

 

posted @ 2013-04-01 13:06  KeenLeung  阅读(321)  评论(0)    收藏  举报