[置顶] Jquery自动生成当前年份日期筛选框

项目需要,写了这个自动生成年份和月份的筛选框的功能

  • 其中年份select可以生成从指定年份到今年的多个option,并默认选中今年;
  • 月份select默认生成从1月到今月的多个option,并默认选中今月;
  • 当年份select改变option时,联动改变月份select的option。

注意:都是在jQuery下写的

//首先是工具函数:给select添加option
function addtosel( sel_id, op_id, op_name )
{
    if( sel_id == undefined ||  sel_id == null )
        return;
    var  sel = $( sel_id );
    if( sel != undefined && sel != null)
        sel.add(new Option(op_name, op_id ));
    return sel;
}

///////////////////////////////////////获取2015年至今的年份,把他们给sel选项,并且选中今年
var year_options = [];  
//将这些年份设置给select的options
function set_year_options( sel_id ){
    //获得年份数组
    var this_year = 0;
    var this_date = new Date();
    this_year = this_date.getFullYear();  //得到今年
    //设置一个起始年份,然后把从起始年份到今年的这几年,放入数组。
    for(var start_year = 2015;start_year<=this_year;start_year++){
        year_options.push(start_year);
    }
    //清空选项年份选select的option
    $(sel_id).find("option").remove();
    //增加一个Please select的 option
    addtosel( sel_id, "", "Please select" );
    //加入刚才的年份
    for(var i=0;i<year_options.length;i++){
        addtosel( sel_id, year_options[i], year_options[i] );
    }
    //选中最新的年份
    set_selected_value( sel_id, year_options[year_options.length-1] );
    year_options = [];
}
//////////////////////////////////获取年初至今的月份,把他们给sel选项,并且选中这个月
var mouth_options = [];
var en_mouth = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
//将这些年份设置给select的options
function set_mouth_options( sel_id ){
    //获得月份数组
    var this_mouth = 0;
    var this_date = new Date();
    this_mouth = this_date.getMonth();//得到今月
    //从一月到今月放入月份数组
    for(var start_mouth = 0;start_mouth<=this_mouth;start_mouth++){
        mouth_options.push(start_mouth);
    }
    //清空月份select的option
    $("#"+sel_id).find("option").remove();
    //给月份select先增加一个Please select 的option
    addtosel( sel_id, "", "Please select" );
    //加入新的月份数组选项
    for(var i=0;i<mouth_options.length;i++){
        addtosel( sel_id, en_mouth[i], en_mouth[i] );
    }
    //选中最新的月份
    set_selected_value( sel_id, en_mouth[mouth_options.length-1] );
    mouth_options = [];
}
//当年份的select选项onchange的时候让月份联动起来。
//将这个函数绑定给年份select,并且写入参数
function on_year_change(year_sel_id,mouth_sel_id){
    //取被选中的选项那一年
    var selected_option_value = $(year_sel_id).find("option:selected").val();
    //取今年(是年份数组的最后一个值)
    var this_year = $(year_sel_id).find("option:last").val();
    if( selected_option_value ==  this_year ){//如果选中的是今年
        $(mouth_sel_id).find("option").remove();//清空月份的option
        set_mouth_options(mouth_sel_id);//重新设置今年的月份option
    }else{  //若选中的不是今年,也就是以前的年份,那么月份得显示全部12个月
        $(mouth_sel_id).find("option").remove();//清空月份option
        addtosel( mouth_sel_id, "", "Please select" );//给月份增加一个Please select的option
        for(var i=0;i<12;i++){//加入全部12个月的option
            addtosel( mouth_sel_id, en_mouth[i], en_mouth[i] );
        }
    }
}

所需的函数就是以上这些,在使用的时候还需要绑定。

$().ready(function(){
    //给年份select增加options
    set_year_options("#year_select");
    //给月份select增加options 
    set_mouth_options("#mouth_select");
    //绑定联动 
    $("#year_select").change(function(){
        on_year_change("year_select","mouth_select");
    }); 
});

你可能感兴趣的:(jquery,联动,自动生成日期选项)