javascript年月日三级联动下拉框

最新推荐文章于 2018-05-31 20:55:00 发布

Violet_Ice紫冰

最新推荐文章于 2018-05-31 20:55:00 发布

阅读量2.1k

点赞数 3

分类专栏： javascript 文章标签： javascript 年月日三联下拉框

本文链接：https://blog.csdn.net/lrf8643/article/details/77165518

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

看了好几篇 js 年月日三级联动下拉框，没看到一个好的，不是太繁琐，就是太猥琐。还有就是闲得慌。

有这样的：

function (){
    return Array(
        [1...28],
        [1...30],
        [1...31]
    )
}

简直了，这是要有多闲。
还有的写的很复杂，这很简单的东西，搞得那么复杂给谁看。我看半天愣是没看懂。

这是我写的一个年月日三级联动下拉框。

<!DOCTYPE html>
<html lang="en">
    <body>
        <select id="y" onchange="funy(this)"></select>
        <select id="m" onchange="funm(this)"></select>
        <select id="d"></select>
    </body>
    <script>
        /*
            在你的页面需要这三条html代码
            <select id="y" onchange="funy(this)"></select>
            <select id="m" onchange="funm(this)"></select>
            <select id="d"></select>
        */
        var y = document.getElementById('y');
        var m = document.getElementById('m');
        var d = document.getElementById('d');

        var D = new Date();
        var yy = D.getFullYear();               //年
        var mm = parseInt(D.getMonth()) + 1;    //现在是8月，月份获取是7月。一脸懵逼！
        var dd = D.getDate();                   //日
        var oyy = 10 * (yy - 100).toString().substr(0,3);   //计算最小年 o = old
        var marr = [1,3,5,7,8,10,12];           //列出31天的月份
        var add;                                //初始化每月天数 a = all

        starty();           //开始生成年下拉列表
        startm();           //开始生成月下拉列表
        startd(dd,mm,yy);   //开始生成日下拉列表

        // 生成年下拉列表
        function starty(){
            // 初始化
            var pyy = document.createElement('option');
            pyy.innerText = '选择 年';
            pyy.value = 0;
            y.appendChild(pyy);

            // 循环出所有年
            for(i=yy;i>=oyy;i--){
                pyy = document.createElement('option');
                pyy.innerText = i + ' 年';
                pyy.value = i;
                y.appendChild(pyy);
            }
        }

        // 生成月下拉列表
        function startm(){
            // 初始化
            var pmm = document.createElement('option');
            pmm.innerText = '选择 月';
            pmm.value = 0;
            m.appendChild(pmm);

            // 判断是否选择了年
            if(y.selectedOptions[0].value == 0) return;

            // 循环出所有月
            for(i=1;i<=12;i++){
                pmm = document.createElement('option');
                pmm.innerText = i + ' 月';
                pmm.value = i;
                m.appendChild(pmm);
            }
        }

        function startd(mm,yy){
            // 初始化
            var pdd = document.createElement('option');
            pdd.innerText = '选择 日';
            pdd.value = 0;
            d.appendChild(pdd);

            // 判断是否选择了月
            if(m.selectedOptions[0].value == 0) return;
            var day = isadd(mm,yy);

            // 循环出所有日
            for(i=1;i<=day;i++){
                pdd = document.createElement('option');
                pdd.innerText = i + ' 日';
                pdd.value = i;
                d.appendChild(pdd);
            }
        }

        // 判断并产生该月的天数
        function isadd(mm,yy){
            if(marr.indexOf(parseInt(mm)) != -1){
                add = 31;
            }
            else{
                add = 30;
                if(mm == 2 && yy % 4 == 0){
                    add = 29;
                }
                else if(mm == 2 && yy % 4 != 0){
                    add = 28;
                }
            }
            return add;
        }

        // 年份改变时调用
        function funy(obj){
            m.innerHTML = null;
            d.innerHTML = null;
            var yy = obj.selectedOptions[0].value;
            startm();
            startd(dd,mm,yy);
        }

        // 月份改变时调用
        function funm(obj){
            d.innerHTML = null;
            var yy = y.selectedOptions[0].value;
            var mm = obj.selectedOptions[0].value;
            startd(mm,yy);
        }
    </script>
</html>