年月日联动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 ...
随机推荐
- Python---TKinter项目实战---屏保
### 项目分析 - 屏保可以自己启动,也可以手动启动 - 一旦敲击键盘或者移动鼠标后,或者其他的引发时间,则停止 - 如果屏保是一幅画的话,则没有画框 - 图像的动作是随机的,具有随机性,可能包括颜 ...
- day02记
一.Tomcat搭建 1.service和controller分别搭建独立的Tomcat且port不一致 2.部署项目选择带有exploded的 3.运行时应先启动service再启动controll ...
- 【leetcode】525. Contiguous Array
题目如下: 解题思路:这个题目可以这么做,遍历数组,如果元素是0,则count --:否则count ++:这样的话,每遍历到一个下标i,count的值就是0>i区间内0和1的差值.如果我们能找 ...
- springboot2.0+mysql整合mybatis,发现查询出来的时间比数据库datetime值快了8小时
参考:https://blog.csdn.net/lx12345_/article/details/82020858 修改后查询数据正常
- word的公式编辑器在插入对象里面！！！！！！！！！！！！！
word的公式编辑器在 插入->对象 里面!!!!!!!!!!!!!
- Spring Cloud架构教程 （八）消息驱动的微服务（消费组）【Dalston版】
使用消费组实现消息消费的负载均衡 通常在生产环境,我们的每个服务都不会以单节点的方式运行在生产环境,当同一个服务启动多个实例的时候,这些实例都会绑定到同一个消息通道的目标主题(Topic)上. 默认情 ...
- UVALive 6859 Points （凸包）
Points 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/E Description http://7xjob4.com1.z ...
- 解决axios异步问题
- 转:SqlBulkCopy类进行大数据(一万条以上)插入测试
转自:https://www.cnblogs.com/LenLi/p/3903641.html 结合博主实例,自己测试了一下,把数据改为3万行更明显!! 关于上一篇博客中提到的,在进行批量数据插入数据 ...
- DRF的路由生成类的使用
DRF路由生成类的使用 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework ...