需求:在一个jsp中,通过javascript脚本动态生成年月日,使用<select>和<option>标签来选择年月日
要求:
(1)生成的年月日要符合规范,例如二月份是28天还是29天,哪个月份是31天,哪个月份是30天,在选择的时候都要求给出符合规范的选择
(2)用户通过所选择的年月日提交到服务器,服务器把数据转发回提交的jsp页面,jsp回显提交的数据;回显的体现通过<selection><option>体现
在web工程的根目录下有一个birthday.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- http://localhost:8080/web/birthday.jsp -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>生日回显</title>
<script type="text/javascript">
function creatBirthday()
{
var yearElement = document.getElementById("year");
for(var i=1901;i<=new Date().getFullYear();i++)
{
var optionElement = document.createElement("option");
optionElement.value = i;
optionElement.innerHTML = i;
yearElement.appendChild(optionElement);
}
createmonth();
}
function createmonth()
{
var monthElement = document.getElementById("month");
for(var i=2; i<=12; i++)
{
var optionElement = document.createElement("option");
if(i<10)
{
optionElement.value = "0"+i;
optionElement.innerHTML = "0"+i;
}
else
{
optionElement.value = ""+i;
optionElement.innerHTML = ""+i;
}
monthElement.appendChild(optionElement);
}
createDay();
}
function createDay()
{
var dayElement = document.getElementById("day");
for(var i=2; i<=31; i++)
{
var optionElement = document.createElement("option");
if(i<10)
{
optionElement.value = "0"+i;
optionElement.innerHTML = "0"+i;
}
else
{
optionElement.value = ""+i;
optionElement.innerHTML = ""+i;
}
dayElement.appendChild(optionElement);
}
echoBirthday();
}
function echoBirthday()
{
var yearValue = "${fn:split(requestScope.birthday,'-')[0]}";
var monthValue = "${fn:split(requestScope.birthday,'-')[1]}";
var dayValue = "${fn:split(requestScope.birthday,'-')[2]}";
var optionNodeList = document.getElementById("year").getElementsByTagName("option");
for(var i=0;i<optionNodeList.length;i++)
{
if(optionNodeList[i].value == yearValue)
{
optionNodeList[i].selected="selected";
}
}
var optionNodeList = document.getElementById("month").getElementsByTagName("option");
for(var i=0;i<optionNodeList.length;i++)
{
if(optionNodeList[i].value == monthValue)
{
optionNodeList[i].selected="selected";
}
}
var optionNodeList = document.getElementById("day").getElementsByTagName("option");
for(var i=0;i<optionNodeList.length;i++)
{
if(optionNodeList[i].value == dayValue)
{
optionNodeList[i].selected="selected";
}
}
}
function changeBirthday()
{
var yearElement = document.getElementById("year");
var monthElement = document.getElementById("month");
var dayElement = document.getElementById("day");
var sourceDayAmount = dayElement.getElementsByTagName("option").length;
//alert(sourceDayAmount);
var destinationDayAmount = new Date(yearElement.value,monthElement.value,0).getDate();
//alert(destinationDayAmount);
if(sourceDayAmount<destinationDayAmount)
{
for(var i=sourceDayAmount+1; i<=destinationDayAmount; i++ )
{
var optionElement = document.createElement("option");
optionElement.value = i;
optionElement.innerHTML = i;
dayElement.appendChild(optionElement);
}
}
if(sourceDayAmount>destinationDayAmount)
{
var j = sourceDayAmount-destinationDayAmount;
for(var i=0;i<j; i++)
{
dayElement.removeChild(dayElement.lastChild);
}
}
}
function checkForm()
{
var yearElement = document.getElementById("year");
var monthElement = document.getElementById("month");
var dayElement = document.getElementById("day");
//alert(yearElement.value+"-"+monthElement.value+"-"+dayElement.value);
var birthdayElement = document.getElementById("birthday");
birthdayElement.value = yearElement.value+"-"+monthElement.value+"-"+dayElement.value;
//alert(birthdayElement.value);
return true;
}
</script>
</head>
<body οnlοad="creatBirthday()">
<form action="${pageContext.request.contextPath}/BirthdayDisposeServlet" method="post" οnsubmit="return checkForm();">
<select id="year" οnchange="changeBirthday()">
<option value="1900">1900</option>
</select>年
<select id="month" οnchange="changeBirthday()">
<option value="01">01</option>
</select>月
<select id="day">
<option value="01">01</option>
</select>日
<input type="hidden" name="birthday" id="birthday" />
<input type="submit" value="提交">
</form>
</body>
</html>
有一个Servlet用来把提交的数据打回
package cn.itcast.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BirthdayDisposeServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
String birthday = req.getParameter("birthday");
req.setAttribute("birthday", birthday);
System.err.println(birthday);
req.getRequestDispatcher("/birthday.jsp").forward(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
this.doGet(req, resp);
}
}
效果如下:
控制台效果如下: