年月日联动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 ...
随机推荐
- linux C++ 通讯架构（一）nginx安装、目录、进程模型
nginx是C语言开发的,号称并发处理百万级别的TCP连接,稳定,热部署(运行时升级),高度模块化设计,可以用C++开发. 一.安装和目录 1.1 前提 epoll,linux内核版本为2.6或以上 ...
- 调整数组顺序使奇数位于偶数前面（python）
题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 方法1:冒泡 O( ...
- linux运维、架构之路-MySQL备份与恢复(四)
一.备份方式 ①逻辑备份(文件表示:SQL语句) ②物理备份(数据文件的二进制副本) ③基于快照的备份 ④基于复制的备份 二.备份工具 ①mysqldump:原生自带的逻辑备份工具 ②mysqlbin ...
- HDU 6230 Palindrome ( Manacher && 树状数组)
题意 : 给定一个字符串S,问你有多少长度为 n 的子串满足 S[i]=S[2n−i]=S[2n+i−2] (1≤i≤n) 参考自 ==> 博客 分析 : 可以看出满足题目要求的特殊回文子串其 ...
- LCA【Tarjan】
首先,我们先来了解LCA. LCA 是树上两个点最近的公共祖先. 比如说,在如图的树中,3与4的公共祖先有“2”,“1”,但最近的祖先是“2”. 显然,暴力可以做O(n),但是我们希望更快. 现在,有 ...
- UOJ37. 【清华集训2014】主旋律
http://uoj.ac/problem/37 题解 题目是让我们求出有多少个边集可以使这张图强连通. 先补集转化一下,求这张图不强连通的方案数. 我们考虑这样的图缩完点之后的情况,既然不强连通,那 ...
- lists.newarraylist()和new arraylist() 区别
转自 https://blog.csdn.net/qq_2300688967/article/details/79490345 lists.newarraylist(): List<String ...
- ANativeWindow_fromSurface
c++后台若使用ANativeWindow_fromSurface将surface转化为ANativeWindow: 需要头文件:#include <android/native_window_ ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_10 打印流_1_打印流_概述和使用
system.out就是打印流 System的源码里面out参数就是一个PrintStream类型的 例如路径写的是E盘,.没有e盘这个路径就会抛出异常 用println直接写入的就是97 这个 ...
- oracle 11g 数据库恢复技术 ---02 控制文件
oracle 11g 数据库恢复技术 ---02 控制文件 SYS@ orcl >show parameter control_file NAME TYPE VALUE ------------ ...