年月日联动select下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select{
font:20px/40px '宋体';
}
option{width: 100px;}
</style>
</head>
<body>
<div id="box">
<select name="sel1" id="sel1">
<option value="year">年</option>
</select>
<select name="sel2" id="sel2">
<option value="month">月</option>
</select>
<select name="sel3" id="sel3">
<option value="day">日</option>
</select>
<!--<span id="result"></span>-->
</div> <script>
//生成日期
function creatDate(){
//生成1900年-2100年
for(var i = 1900; i<=2100;i++){
var option = document.createElement('option');
option.setAttribute('value',i);
option.innerHTML = i;
sel1.appendChild(option);
}
//生成1月-12月
for(var i = 1; i <=12; i++){
var option = document.createElement('option');
option.setAttribute('value',i);
option.innerHTML = i;
sel2.appendChild(option);
}
//生成1日—31日
for(var i = 1; i <=31; i++){
var option = document.createElement('option');
option.setAttribute('value',i);
option.innerHTML = i;
sel3.appendChild(option);
}
}
creatDate();
//保存某年某月的天数
var days;
//年份点击
sel1.onclick = function(){
//月份显示默认值
sel2.options[0].selected = true;
//天数显示默认值
sel3.options[0].selected = true;
}
//月份点击
sel2.onclick = function(){
//天数显示默认值
sel3.options[0].selected = true;
//计算天数的显示范围
//如果是2月
if(sel2.value == 2){
//如果是闰年
if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0){
days = 29;
//如果是平年
}else{
days = 28;
}
//如果是第4、6、9、11月
}else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){
days = 30;
}else{
days = 31;
}
//增加或删除天数
//如果是28天，则删除29、30、31天(即使他们不存在也不报错)
if(days == 28){
sel3.remove(31);
sel3.remove(30);
sel3.remove(29);
}
//如果是29天
if(days == 29){
sel3.remove(31);
sel3.remove(30);
//如果第29天不存在，则添加第29天
if(!sel3.options[29]){
sel3.add(new Option('29','29'),undefined)
}
}
//如果是30天
if(days == 30){
sel3.remove(31);
//如果第29天不存在，则添加第29天
if(!sel3.options[29]){
sel3.add(new Option('29','29'),undefined)
}
//如果第30天不存在，则添加第30天
if(!sel3.options[30]){
sel3.add(new Option('30','30'),undefined)
}
}
//如果是31天
if(days == 31){
//如果第29天不存在，则添加第29天
if(!sel3.options[29]){
sel3.add(new Option('29','29'),undefined)
}
//如果第30天不存在，则添加第30天
if(!sel3.options[30]){
sel3.add(new Option('30','30'),undefined)
}
//如果第31天不存在，则添加第31天
if(!sel3.options[31]){
sel3.add(new Option('31','31'),undefined)
}
}
} //结果显示
// box.onclick = function(){
// //当年、月、日都已经为设置值时
// if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day'){
// var day = new Date(sel1.value,sel2.value-1,sel3.value).getDay();
// result.innerHTML = sel1.value + '年' + sel2.value + '月' + sel3.value + '日' + '星期' + changDay(day);
// }else{
// result.innerHTML = '';
// }
// }
//星期格式切换
// function changDay(num){
// switch(num){
// case 0:
// return '日';
// case 1:
// return '一';
// case 2:
// return '二';
// case 3:
// return '三';
// case 4:
// return '四';
// case 5:
// return '五';
// case 6:
// return '六';
// }
// }
</script> </body>
</html>
来源 http://www.cnblogs.com/xiaohuochai/p/5877594.html
年月日联动select下拉菜单的更多相关文章
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- jQuery插件：模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- select 下拉菜单Option对象使用add(elements,index)方法动态添加
原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...
- select下拉菜单反显不可改动，且submit能够提交数据
首先通过后台funcA()将下拉菜单反显不可改动的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.obj ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- 手写的select 下拉菜单
我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...
- 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框
这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...
- Jquery-操作select下拉菜单
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
随机推荐
- LeetCode--146--LRU缓存机制(python)
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 (key) 存 ...
- 用设计模式来替代if-else
前言 物流行业中,通常会涉及到EDI报文(XML格式文件)传输和回执接收,每发送一份EDI报文,后续都会收到与之关联的回执(标识该数据在第三方系统中的流转状态).这里枚举几种回执类型:MT1101.M ...
- jsp格工化日期
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> .当后台传过来的时 ...
- CF786B Legacy 线段树优化建图 + spfa
CodeForces 786B Rick和他的同事们做出了一种新的带放射性的婴儿食品(???根据图片和原文的确如此...),与此同时很多坏人正追赶着他们.因此Rick想在坏人们捉到他之前把他的遗产留给 ...
- Activiti之Idea生成png图片及解决乱码问题(四)
IDEA 工具中的操作方式 第一步:将 holiday.bpmn 文件改为扩展名 xml 的文件名称: holiday.xml修改前的 bpmn 文件,效果如下: 第二步: 在 holiday.xml ...
- Leetcode 9. Palindrome Number（水）
9. Palindrome Number Easy Determine whether an integer is a palindrome. An integer is a palindrome w ...
- 学习日记15-1布局页同时引用多个model
@model Tuple<model1,model2> mvc布局页同时引用多个model 使用m.Item1.xxx m.Item2.xxx
- 重新理解了重定向，利用重定向可以防止用户重复提交表单（兼谈springmvc重定向操作）
自己用springmvc框架有一段时间了,但是都还一直分不清楚什么时候应该用转发,什么时候应该用重定向.可能用转发的情形太多了,以致于自己都忘记了还有重定向. 当用户提交post请求之后,刷新页面就会 ...
- .Net Core入门与.Net需要注意的地方
1.编码注册 Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); 否则抛出异常 'GB2312' is not a suppo ...
- springSecurity总结
springSecurity总结: 一.Spring security框架简介 1.简介 一个能够为基于Spring的企业应用系统提供声明式的安全訪问控制解决方式的安全框架(简 ...