年月日联动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 ...
随机推荐
- Zookeeper实现哨兵机制
master选举使用场景及结构 现在很多时候我们的服务需要7*24小时工作,假如一台机器挂了,我们希望能有其它机器顶替它继续工作.此类问题现在多采用master-salve模式,也就是常说的主从模式, ...
- IntelliJ IDEA VM options（转）
Custom IntelliJ IDEA VM options # Custom IntelliJ IDEA VM options ##################JVM模式########### ...
- ASP.NET实现大文件上传和下载
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
- php 单示例编程
<?php defined('SYSPATH') or die('No direct script access.'); class Kohana_BOTA { //私有构造方法,防止再次实例化 ...
- 进阶1：Linux 环境准备_ 设置网络IP_安装火狐浏览器
VM 已安装 centos6.5 Final 已安装 配置好了Linux IP ,并能ping 通 ,例如 : ping www.baidu.com 设置LINUX 网络IP: https://j ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 2.单表查询
Chapter 2 Single-Table Queries GROUP BY之后的阶段的操作对象就是组(可以把一组想象成很多行组成的)了,HAVING负责过滤掉一些组.分组后的COUNT(*)表示每 ...
- 架构-数据库访问-SQL语言进行连接数据库服务器-DB-Library：DB-Library
ylbtech-数据库访问-SQL语言进行连接数据库服务器-DB-Library:DB-Library 1.返回顶部 1. 在基于三层构架的信息系统开发中,应用服务器要利用SQL语言进行连接数据库服务 ...
- 用流的方式来操作hdfs上的文件
import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...
- python 设置开机启动脚本
1.创建python_auto.bat的快捷方式,放入启动项: C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\ ...
- Raudus入门(1)
Raudus入门(1) (2013-08-09 14:38:17) 转载▼ 标签: it 分类: Delphi 基于delphi做web应用,有个Raudus,基于对ext js的封装,可以在delp ...