weiyong
/
201906G105


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校运会报名</title>
<style type="text/css">
    *{ margin: 0;
       padding: 0;
    }
    body{
    	background: linear-gradient(to top right, white 0%, skyblue 98%,blue 100%);
    	font-family: "宋体";
    }
	h1{
	    color: white;
	    margin-left: 20px;
	    margin-top: 15px;
	}
	h4{ color: white;
		margin-left: 20px;
	}
	.a{
		height: 20px;
		width: 95%;
		background: linear-gradient(to bottom, white 25%, gray 100%);
		margin-top: 10px;
		margin-left: 20px;
	}
	.b{
		height: 600px;
		width: 330px;
		margin: 10px 0 0 15px;
		line-height: 20px;
		color: green;
	}
	.d{
		height: 630px;
		width: 450px;
		margin: -590px 0 0 375px;
	}
	form{height: 600px;
		 width: 550px;
	}
	table{margin:30px 0 0 70px;
		  line-height: 50px;
	}
</style>
</head>
<body>
<h1>
	深圳信息职业技术学院校运会报名
</h1>
<h4>Shenzhen Vocational and Technical College of Information Enrollment for School Games</h4>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d">
	<form action="enter.do" method="post">
		<fieldset style="width: 450px;height: 600px;">
			<legend>报名信息</legend>
			<table border="0" cellspacing="0" cellpadding="20">
				<tr>
					<td>
						姓名：<input type="text" name="name">
					</td>
				</tr>
				<tr>
					<td>
						学号：<input type="text" name="num">
					</td>
				</tr>
				<tr>
					<td>
						班级：<input type="text" name="class0">
					</td>
				</tr>
				<tr>
					<td>
						性别：
					<input type="radio" name="sex" value="男">男
					<input type="radio" name="sex" value="女">女
					</td>
				</tr>
				<tr>
					<td>
						联系电话：<input type="text" name="telephone">
					</td>
				</tr>
				<tr>
					<td>
						请选择报名组别：<select name="group" id="province" runat="server" onchange="selectprovince(this);" style=" width:95px;"></select>
					</td>
				</tr>
				<tr>
					<td>
						请选择报名项目：<select name="project" id="city" runat="server" style=" width:95px;"></select>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="提交报名信息">
					</td>
				</tr>
			</table>
		</fieldset>
	</form>
	<script type="text/javascript">
    var list1 = new Array;
    var list2 = new Array;
    list1[list1.length] = "学生组";
    list1[list1.length] = "教工青年组";
	list1[list1.length] = "教工中年组";
	list1[list1.length] = "教工老年组";
    list2[list2.length] = new Array("100米", "200米", "400米", "800米", "1500米", "3000米", "4×100米接力", "跳高","三级跳远", "铅球");
	list2[list2.length] = new Array("100米", "800米", "跳高","跳远","铅球");
	list2[list2.length] = new Array("60米", "800米", "跳高","跳远","铅球");
	list2[list2.length] = new Array("60米", "50米托球跑","跳远","铅球");
    var ddlProvince = document.getElementById("province");
    var ddlCity = document.getElementById("city");
    for(var i =0;i<list1.length; i++)
    {
        var option = document.createElement("option");
        option.appendChild(document.createTextNode(list1[i]));
        option.value = list1[i];
        ddlProvince.appendChild(option);
        //city initialize
        var firstprovince = list2[0];
        for (var j = 0; j < firstprovince.length; j++) {
            var optioncity = document.createElement("option");
            optioncity.appendChild(document.createTextNode(firstprovince[j]));
            optioncity.value = firstprovince[j];
            ddlCity.appendChild(optioncity);
        }
    }
    function indexof(obj,value)
    {
        var k=0;
        for(;k<obj.length;k++)
        {
            if(obj[k] == value)
            return k;
        }
        return k;
    }
    function selectprovince(obj) {
        ddlCity.options.length = 0;//clear
        var index = indexof(list1,obj.value);
        var list2element = list2[index];
        for(var i =0;i<list2element.length; i++)
        {
            var option = document.createElement("option");
            option.appendChild(document.createTextNode(list2element[i]));
            option.value = list2element[i];
            ddlCity.appendChild(option);
        }
    }
	</script>
</div>

</body>
</html>