<!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下拉菜单的更多相关文章

  1. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  2. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  3. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  4. select下拉菜单反显不可改动，且submit能够提交数据

    首先通过后台funcA()将下拉菜单反显不可改动的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.obj ...

  5. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  6. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  7. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  8. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

  9. Jquery-操作select下拉菜单

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

随机推荐

  1. 如何编译Java程序以及运行程序

    一.编辑运行 二.HelloWorld程序的组成: 三.public static void main(String[] args){} 四.System.out.println("Hell ...

  2. watch和computed

    watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...

  3. lua脚本入门

    在网上下载一些工程,里边常常存在.lua .sh .in .cmake .bat等文件 今天专门查了一下相关文件的作用 .sh 通常是linux.unix系统下的脚本文件(文本文件),用于调用默认的s ...

  4. 「概率，期望DP」总结

    期望=Σ概率*权值 1. Codeforces 148-D 考虑用$f[i][j]$表示princess进行操作时[还剩有i只w,j只b]这一状态的存在概率.这一概率要存在,之前draw out的一定 ...

  5. Node 资源

    Node.js 首页 最新的 Node.js 核心文档 Node.js 博客 Node.js 职位公告板 Node.js 包管理器(npm)的首页

  6. 3D Computer Grapihcs Using OpenGL - 06 Vertex and Fragment Shaders

    从这里就接触到了可编程图形渲染管线. 下面介绍使用Vertex Shader (顶点着色器)和 Fragment Shader(像素着色器)的方法. 我们的目标是使用这两个着色器给三角形填充绿色. 添 ...

  7. 170830-关于JdbcTemplate的知识点

    1.Spring提供的一个操作数据库的技术JdbcTemplate,是对Jdbc的封装.语法风格非常接近DBUtils. JdbcTemplate可以直接操作数据库,加快效率,而且学这个JdbcTem ...

  8. es的脑裂

    一个正常es集群中只有一个主节点,主节点负责管理整个集群,集群的所有节点都会选择同一个节点作为主节点:所以无论访问那个节点都可以查看集群的状态信息. 而脑裂问题的出现就是因为从节点在选择主节点上出现分 ...

  9. [CSP-S模拟测试]:辣鸡(ljh) （暴力）

    题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.然而在上化学课的时候,数学和化学都不好的$ljh$却被一道简单题难住了,受到了大佬的嘲笑.题目描述是这样的:在一个二维平面上有一层 ...

  10. 在Ubuntu16.04下安装SourceInsight和WeChat

    1 使用Wine安装SourceInsight4 1.1 安装Wine $ sudo apt-get install wine 1.2 安装SourceInsight 下载SourceInsight软 ...