jQuery 年月日三级联动

html页面

<div class="form-group">
       <label class="col-sm-4 control-label">出生年月:</label>
              <div class="col-sm-8">
                      <div class="control-input">
                               <label class="inline time-line">
                                        <select name="year" id="year"></select> 年
                               </label>
                               <label class="inline time-line">
                                        <select name="month" id="month"></select> 月
                               </label>
                               <label class="inline time-line">
                                        <select name="day" id="day"></select>日
                               </label>
                      </div>
              </div>
 </div>

用于实现三级联动的jQuery页面

$(function () {
    var dayTime = 0;
    years();
    months();
    days();
    //设置年月日初始化变量
    $('#year').val("--");
    $('#month').val("--");
    $('#day').val("--");
    //改变year调用months和days函数，以下类同
    $('#year').change(function () {
        months();
        days();
    })
    $('#month').change(function () {
        days();
    })
    function years() {
        var dates = new Date();
        var nowYear = dates.getFullYear();
        for (i = nowYear; i >= 1968; i--) {
            //用于打印输出年的范围，以下类同
            var str = "<option value=\"" + i + "\">" + i + "</option>";
            $('#year').append(str);
        }
    }

    function months() {
        $('#month').empty();
        for (i = 1; i <= 12; i ++) {
            var str = "<option value=\"" + i + "\">" + i + "</option>";
            $('#month').append(str);
        }
    }
    function days() {
        $('#day').empty();
        //判定润年平年进行设置 2月份
        if(parseInt($('#month').val())==1||parseInt($('#month').val())==3||parseInt($('#month').val())==5||parseInt($('#month').val())==7||parseInt($('#month').val())==8||parseInt($('#month').val())==10||parseInt($('#month').val())==12){
            dayTime = 31;
        }
        else if (parseInt($('#month').val())==4||parseInt($('#month').val())==6||parseInt($('#month').val())==9||parseInt($('#month').val())==11){
            days = 30;
        }
        else {
            if (parseInt($("#year").val()) % 400 == 0 || (parseInt($("#year").val()) % 4 == 0 && parseInt($("#year").val()) % 100 != 0)) {
                dayTime = 29;
            }
            else {
                dayTime = 28;
            }
        }
        for(i = 1; i<=dayTime;i++){
            var str = "<option value=\"" + i + "\">" + i + "</option>";
            $('#day').append(str);
        }
    }
})

由于使用的ubuntu 图片样式未使用，往谅解

转载于:https://my.oschina.net/u/2929937/blog/876373