<!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. 使用git管理文件版本

    创建版本库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以 ...

  2. 岭回归、lasso

    参考:https://blog.csdn.net/Byron309/article/details/77716127     ----    https://blog.csdn.net/xbinwor ...

  3. handy源码阅读（五）：PollerBase类

    使用poll内核函数等待事件发生: struct PollerBase: private noncopyable { int64_t id_; int lastActive_; PollerBase( ...

  4. HDU 1314 Numerically Speaking（大数加减乘除+另类二十六进制互相转换）

    原题代号:HDU 1314 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1314 Numerically Speaking Time Limit: 2 ...

  5. python新动态执行 文件头标识 禁止断言

    1.exec “python语句” 2. 3.禁止断言

  6. Nginx 在 Linux 下安装与搭建集群

    搭建集群图例 集群搭建图如下,为了简单一点,使用一个Nginx服务器+两个Tomcat服务器,省略数据库部分: 环境说明 Linux 为 CentOS 7.2 发行版 + Java jdk 1.8 + ...

  7. netflow-module

    https://www.elastic.co/guide/en/logstash/current/netflow-module.html

  8. str_shuffle函数

      str_shuffle() 函数打乱一个字符串,使用任何一种可能的排序方案.     <?php $str = 'hello world '; echo str_shuffle($str); ...

  9. Django的media配置与富文本编辑器使用的实例

    效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...

  10. pc显示，手机隐藏

    <div class="none"><img src="https://www.foresthouse.cn/bigpic.jpg"/> ...