jquery实现Select 下拉框只选择年月

最新推荐文章于 2024-04-12 09:17:26 发布

原创最新推荐文章于 2024-04-12 09:17:26 发布 · 6.3k 阅读

11 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#前端 #时间选择器 #入门级

前端小知识专栏收录该内容

1 篇文章

订阅专栏

一名后端开发者因前端人力紧张，自研简易时间选择器。利用jQuery实现年份和月份的下拉选择，覆盖未来和过去各20年，自动设置当前时间为默认选项。

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

本人后端一枚，最近由于前段人手不足，无奈只能自己琢磨着写一些前端。其中有一个需求是需要通过选择来提交时间，但是只有年份和月份。本来想用网上那些现成的插件，但是，想了一下，插件还有学习成本233。索性自己用jquery 写一个简易版的时间选择器。

上代码

<select  name="build_time" type="text" class="form-control cz_input select_time" >
                          <option value="">建成年份</option>
                        </select>

<script language="javascript" type="text/javascript">
    window.onload=function(){
////设置年份的选择
        var myDate= new Date();
        var year = myDate.getFullYear(); // 年份
        var month = myDate.getMonth() + 1; // 月份
        var startYear=myDate.getFullYear()-20;//起始年份 这个可以自定义前后多少年。
        var endYear=myDate.getFullYear()+20;//结束年份
        var obj=document.getElementsByClassName('select_time');
        var o;
        for (o = 0;o<obj.length;o++)
        {
            for (var i=startYear;i<=endYear;i++)
            {
                for (var j=1;j<=12;j++)
                {
                    obj[o].options.add(new Option(i+"-"+j,i+"-"+j));
                    if (j == 12){
                        obj[o].options.add(new Option("---------------",""));
                    }
                }
            }
            //  设置选中当前月
            $(obj[o]).find("option").each(function () {
                if ($(this).val() === year+"-"+month){
                    $(this).attr("selected",true)
                }
            });
        }

    }
</script>

下面是效果图：