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

前端小知识 专栏收录该内容
1 篇文章 0 订阅

  本人后端一枚,最近由于前段人手不足,无奈只能自己琢磨着写一些前端。其中有一个需求是需要通过选择来提交时间,但是只有年份和月份。本来想用网上那些现成的插件,但是,想了一下,插件还有学习成本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>

下面是效果图:

hhh,是不是很简单。当然我是选择了时间最短的开发方式。不要吐槽我业务能力233

  • 1
    点赞
  • 4
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值