<selection><option></option></selection>回显数据（jsp页面回显数据）

最新推荐文章于 2023-01-06 19:04:13 发布

banzhengyu

最新推荐文章于 2023-01-06 19:04:13 发布

阅读量1.9k

点赞数 1

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/banzhengyu/article/details/50650483

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：在一个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);
	}
    
}