简单的年月联动

最新推荐文章于 2021-06-08 21:47:51 发布

weixin_30617561

最新推荐文章于 2021-06-08 21:47:51 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vnii/archive/2010/11/15/1877581.html

本文介绍了一个使用JavaScript动态生成HTML下拉菜单的方法。通过设置年份和月份的选项，可以快速创建一个包含当前年份及其前后若干年的选择器，并默认选中当前年月。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<SELECT NAME="SelTjYear">
</SELECT>
<SELECT NAME="SelTjMonth">
</SELECT>

源码：

function vYearMonth(yearObjId, monthObjId) {
    var selYear = document.getElementById(yearObjId);
    var selMonth = document.getElementById(monthObjId);
    var myDate = new Date(); //当前日期
    var myYear = myDate.getFullYear(); //当前年
    var myMonth = myDate.getMonth() + 1; //当前月
    var yearMin = -2; //年份范围值，也当前年比较的差值
    var yearMax = 10; //年份范围值，也当前年比较的差值

    //Begin年*******************************
    selYear.options.add(new Option("", ""));
    for (var i = yearMin; i < yearMax; i++) {
        var opt = new Option(myYear + i, myYear + i);
        selYear.options.add(opt);
    }
    //这里1-yearMin表示选中当前年，用1是因为开头有插入""
    selYear.options.selectedIndex = 1 - yearMin;
    //End年*******************************

    //Begin月*******************************
    selMonth.options.add(new Option("", ""));
    for (var i = 0; i < 12; i++) {
        var opt = new Option(i + 1, i + 1);
        selMonth.options.add(opt);
    }
    //选中当前月
    selMonth.options.selectedIndex = myMonth;
    //End月*******************************


    selYear.onchange = function () {
        if (this.value == "") {
            selMonth.selectedIndex = 0;
        }
        else {
            if (selMonth.value == "") {
                selMonth.selectedIndex = myMonth;
            }
        }
    };
}

调用：