<!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. python-语言播报

       利用系统自带模块: 在cmd中  python -m pip install pypiwin32   安装win32com模块 import win32com.client sp=win32co ...

  2. 下载csv

    export function downloadCsv(val, key, name, keyName) { if (val.length) { let str = [] str.push(keyNa ...

  3. handy源码阅读（四）：Channel类

    通道,封装了可以进行epoll的一个fd. struct Channel: private noncopyable { Channel(EventBase* base, int fd, int eve ...

  4. js-进度条-动画

    效果图如下:       HTML: <h1>js实现进度条</h1> <div id="warp"> <div id="inn ...

  5. 51Nod 1277 字符串中的最大值 ( KMP && DP )

    题意 : 一个字符串的前缀是指包含该字符第一个字母的连续子串,例如:abcd的所有前缀为a, ab, abc, abcd.给出一个字符串S,求其所有前缀中,字符长度与出现次数的乘积的最大值.例如:S ...

  6. 题解 P2674 【《瞿葩的数字游戏》T2-多边形数】

    题目说了很清楚,此题找规律,那么就找规律. 我们观察数列. 令k表示数列的第k个数. 三角形数:1 3 6 10 15 两项相减:1 2 3 4 5 再次相减:1 1 1 1 1 四边形数:1 4 9 ...

  7. SpringCloud 教程 （四） docker部署spring cloud项目

    一.docker简介 Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机). ...

  8. 在阿里云虚拟主机上部署Laravel

    拿laravel5.1来说: 在根目录下创建一个local文件夹,把网站根目录下除了public文件夹以外所有文件及文件夹剪切到local文件夹中 然后把public文件夹下的所有文件剪切到网站根目录 ...

  9. maven入门问题解决

    记录入门使用maven的问题和解决方法: 一.用mvn clean compile编译报错/ 或者在IDE中编译时,Problem视图显示错误:无法从maven服务器或者私有服务器或者某个网站中中下载 ...

  10. ES6 二进制和八进制字面量

    ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者 0O 即可将其转换为二进制值: let oValue = 0o10; console.log(oValue); // 8 let b ...