您现在的位置是:网站首页 > 心得笔记

jquery年、月、日三级联动代码实例

盛悦2019-04-26431人围观
简介当我们在线上做问卷调查或者填写一些信息时,时长需要我们选择出生日期,这里给出了关于出生年月日三级联动的代码实例。

1、html代码

<div class="item " style="border: none">
    <span>生日:</span>
    <select class="Birthday layui-input-inline Year">
            </select>
    <select class="Birthday layui-input-inline Month">
            </select>
    <select class="Birthday layui-input-inline Day">
            </select>
</div>

2、css代码

select {
    background-color:#fff;
}
.Birthday {
    width:27%;
    border:1px solid #ccc;
    height:27px;
}

3、js代码

var date = new Date; //获取当前时间
var year = date.getFullYear(); //获取当前年份
var Month = date.getMonth() + 1;
Month = (Month < 10 ? "0" + Month : Month);
var Day = date.getDate();
Day = (Day < 10 ? "0" + Day : Day.toString());
//页面初始化
$(function() {
    SetYear();
    SetMonth();
    SetDay();
    $(".Year").change(function() {
        SetDay();
    })
    $(".Month").change(function() {
        SetDay();
    })
});

//初始化年份
function SetYear() {
    $(".Year").empty(); //初始化,清空内容
    var aa = "@Model.BirthDate.Year";
    var option = "";
    for (var i = year; i >= year - 60; i--) {
        $(".Year").append($("<option>").val(i).text(i))
    }
    if (aa.length > 0) {
        $(".Year").val(aa); //通过value值,设置对应的选中项
    } else {
        $(".Year").val(year); //通过value值,设置对应的选中项
    }
}

function SetMonth() {
    $(".Month").empty(); //初始化,清空内容
    var aa = "@Model.BirthDate.Month";

    var option = "";
    for (var i = 1; i <= 12; i++) {
        i = (i < 10 ? "0" + i : i.toString());
        $(".Month").append($("<option>").val(i).text(i))
    }
    if (aa.length > 0) {
        aa = (aa < 10 ? "0" + aa : aa.toString());
        $(".Month").val(aa);
    } else {
        $(".Month").val(Month);
    }
}

function SetDay() {
    $(".Day").empty(); //初始化,清空内容
    var aa = "@Model.BirthDate.Day";
    var selectMonth = $(".Month option:selected").val(); //获取当前选中的月份
    var selectYear = $(".Year option:selected").val(); //获取当前选中的年份
    var d = new Date(selectYear, selectMonth, 0); //jq函数:获取某年某个月的天数
    var DayCount = d.getDate(); //某月的天数
    for (var i = 1; i <= DayCount; i++) { //循环当月最大天数
        i = (i < 10 ? "0" + i : i.toString());
        $(".Day").append($("<option>").val(i).text(i)) //添加选项
    }
    if (aa.length > 0) {
        aa = (aa < 10 ? "0" + aa : aa.toString());
        $(".Day").val(aa);
    } else {
        $(".Day").val(Day); //默认选中当前日期
    }

}

运行效果图:

5.png