<!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. tomcat的内存配置

    WEB站点在跑安全测试时,跑一会儿就连接不上,考虑是否是tomcat内存溢出问题. Linux环境,修改Tomcat的内存配置: 修改bin/catalina.sh文件,在cygwin=false前面 ...

  2. v-if 和 v-show

    关于条件渲染 所谓条件渲染,就是根据不同的条件,使用不同的模板来生成 html. 在 Vue.js 中,使用 v-if 和 v-show 指令来控制条件渲染. 区别 v-show 会在app初始化的时 ...

  3. Python的命令行参数（argparse）

    参考:https://www.cnblogs.com/lindaxin/p/7975697.html 参考:https://www.cnblogs.com/dengtou/p/8413609.html ...

  4. A1065

    判断两数相加是否大于第三数,大于输出true,否则输出false(相等也是false) 1 需要注意数字溢出的问题: 2 先判断溢出,因为在a,b都是负数最小值的情况下,相加直接是正数,在c较小的时候 ...

  5. express 和 pm2 建立博客

    前置知识 node.js 相关 服务器相关 在本地参照 express 官网的例子写成后, 上传服务器. 服务器安装 pm2 ,实用 pm2 保护进程. 注意静态文件实用的方法 app.use(exp ...

  6. RAC & MVVM 学习资料整理

    最后更新:2017-01-23 参考链接: MVVM奇葩说 MVVM 介绍 Model-View-ViewModel for iOS [译] 唐巧--被误解的 MVC 和被神化的 MVVM React ...

  7. 10 Django与Ajax

    知识预览 1. Ajax 2. 文件上传 Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用J ...

  8. 克隆虚拟机启动网卡提示错误 Device eth0 does not seem to be present, delaying initialization

    错误原因: 克隆的Linux系统在新的机器上运行,新服务器网卡物理地址已经改变.而/etc/udev/rules.d/70-persistent-net.rules这个文件确定了网卡和MAC地址的信息 ...

  9. 关于.NET Core的一些问题和疑惑

    1 为什么会出现.NET Core这个东西?即它为了解决什么问题. .NET Core是NET的ECMA标准的一种新的实现.目前.NET已有Framework,Mono,Unity等实现. 原先所有的 ...

  10. Linux_DHCP&DHCP Relay

    目录 目录 DHCP DHCP Relay Setup DHCPServer Setup ClientPort DHCPDHCPRelay Setup DHCPRelay service DHCP D ...