使用js和option写一个年月日的下拉框

最新推荐文章于 2023-12-01 02:17:51 发布

zbwroom

最新推荐文章于 2023-12-01 02:17:51 发布

阅读量1.9k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/zbwroom/article/details/77771394

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先看一下效果
这里写图片描述
接下来直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Option</title>
    <script>
        // 获取日期
        var today = new Date();
        // 获取当前年月日
        var year  = today.getFullYear();
        var month = today.getMonth();
        var data  = today.getDate();

        window.onload = function(){
            // 循环年份并且显示到页面
            for( var i = year+10 ; i >= year-10 ; i--){
                var option = new Option( i , i );
                // 如果年份等于当前年份 就默认选择
                if( i == year ){
                    option.selected = true;
                }
                // 添加到id为year的select中
                $('year').add(option);
                console.log($('year').value)
            }
            // 循环月份
            for(var j = 1 ; j <= 12 ;j++){
                var option = new Option( j , j );
                if( ( j - 1 ) == month ) {
                    option.selected = true;
                }
                $('month').add(option);
            }
            // 页面加载调用doChange事件
            doChange();
        }
        // 年份和月份改变的时候调用此事件
        function doChange(){
            // 把$('date')中的option长度变为0
            $('date').options.length = 0;
            var length = 31;
            // 获取月份
            var mon = $('month').value;
            // 如果是2月
            if(mon == 2)
            {
                // 平年就是28
                length = 28;
                // 获取年份
                var num = $('year').value;
                // 判断是不是闰年 闰年就是29
                if(( num % 4  == 0 && num % 100 != 0 ) ||  num % 400 == 0 )
                {
                    length++; 
                }
            }
            // 定义正则判断月份 4 6 9 11 月
            var reg = / [469]|^11$/;
            // 符合条件就是30天
            if(reg.test(mon))
            {
                length = 30;
            }
            // 然后循环 把值塞进去
            for( var k = 1 ; k <= length ; k++ ){
                var option = new Option( k , k );
                $('date').add(option);
            }
        }
        // 封装获取id的简化函数
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <select id="year" onchange="doChange()"></select>
    <select id="month" onchange="doChange()"></select>
    <select id="date"></select>
</body>
</html>