博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个日期下拉菜单的实现
阅读量:5110 次
发布时间:2019-06-13

本文共 2330 字,大约阅读时间需要 7 分钟。

<html>

<head>
<script type="text/javascript">
    function showYear(){
        //获取年份对应的节点
        var yearNode = document.getElementById("year");
        //获取该年份对应的第一个子节点
        var childYear = yearNode.childNodes[0];
        //创建最早日期的对象
        var dateBegin = new Date(1900,0,1);
        //创建当前日期的对象
        var dateNow = new Date();
        //获取最早日期的年份
        var yearBegin = dateBegin.getFullYear();
        //获取当前日期的年份
        var yearNow = dateNow.getFullYear();
        //创建一个储存年份的数组并将从最早日期的年份到当前日期的年份存进去
        var years = new Array();
        for(;yearBegin<=yearNow;yearBegin++){
            years.push(yearBegin);
        }
        //遍历对应的所有年份然后创建对应的option添加到year上
        for(var index = 0;index<years.length;index++){
            var option = document.createElement("option");
            option.innerHTML = years[index];
            yearNode.appendChild(option);
        }
    }
    function showMonth(){
        //获取月份对应的节点
        var monthNode = document.getElementById("month");
        //获取该月份对应的第一个子节点
        var childMonth = monthNode.childNodes[0];
        //创建一个储存月份数的数组,并将月份数存进去
        var months = new Array();
        for(var i = 1;i<=12;i++){
            months.push(i);    
        }    
        //清除month框里的月份数据
        monthNode.options.length = 1;
        //遍历对应的所有月份然后创建对应的option添加到month上
        for(var index = 0;index<months.length;index++){
            var option = document.createElement("option");
            option.innerHTML = months[index];
            monthNode.appendChild(option);    
        }
    }
    function showDate(){
        //获取日期对应的节点
        var dateNode = document.getElementById("date");
        //获取该日期对应的第一个子节点
        var childDate = dateNode.childNodes[0];
        //创建一个储存所选年份月份天数的数组,并将天数存进去
        var days = new Array();
        // 获取下拉框所选年份的数值并转为Nunber类型
        var yearSelect = parseInt(document.getElementById("year").value);
        // 获取下拉框所选月份的数值并转为Nunber类型
        var monthSelect = parseInt(document.getElementById("month").value);
        var date = new Date(yearSelect,monthSelect,0);    
        //获取该月的天数
        var dayNumber = date.getDate();
        for(var i = 1; i <= dayNumber;i++){
                days.push(i);    
            }
        //清除 date框里的日期数据
        dateNode.options.length = 1;    
        //遍历对应的所有日期然后创建对应的option添加到date上
        for(var index = 0;index<days.length;index++){
            var option = document.createElement("option");
            option.innerHTML = days[index];
            dateNode.appendChild(option);    
        }
    }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
年<select id="year" οnchange="showMonth()" οnclick="showYear()">
        <option>年份</option>
    </select>
    月<select id="month" οnchange="showDate()">
        <option>月份</option>
    </select>
    日<select id="date">
        <option>日期</option>
    </select>
</body>
</html>

转载于:https://www.cnblogs.com/xue-xu-hao/p/5978841.html

你可能感兴趣的文章
使用C#通过调用minitab的COM库自动化生成报表
查看>>
(三)、
查看>>
linux输入子系统之按键驱动
查看>>
SVN提交文件失败:系统找不到指定路径
查看>>
团队组建的一些想法
查看>>
Markdown快速入门
查看>>
linux 下部署 java quartz job
查看>>
HTML5 中 40 个最重要的技术点
查看>>
Git——简说.git目录【五】
查看>>
layui——Cannot create property 'LAY_TABLE_INDEX' on number '1'
查看>>
URAL1561 Winnie the Pooh
查看>>
深度解析mysql登录原理
查看>>
阿里云 ecs云主机 静默安装oracle11g
查看>>
java并发LockSupport
查看>>
web文件上传
查看>>
REDIS fdatasync技术问题和BIO技术的引入
查看>>
自然语言处理结合金融专业应用,主要在于资料搜集和处理。
查看>>
HDU 3311 Dig The Wells(spfa+压缩DP,5级)
查看>>
房租管理小软件(-):主要界面
查看>>
windows下 gvim8.0 编译器配置
查看>>