您现在的位置是:网站首页 > 心得笔记
jquery年、月、日三级联动代码实例
简介当我们在线上做问卷调查或者填写一些信息时,时长需要我们选择出生日期,这里给出了关于出生年月日三级联动的代码实例。
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); //默认选中当前日期
}
}运行效果图:

上一篇:输入框倒数字数限制代码实例