JQuery练习——年月日级联查询
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
年：<select id="selYear"><option value="-1">-年-</option></select>
月：<select id="selMonth"><option value="-1">-月-</option></select>
日：<select id="selDate"><option value="-1">-日-</option></select>
</body>
</html>
JavaScript代码：
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var $selYear = $("#selYear");
var $selMonth = $("#selMonth");
var $selDate = $("#selDate");
var yearList = [1988, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
var monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dateList = new Array();
dateList[-1] = [];
dateList[0] = [29, 30, 31];
dateList[1] = [29];
dateList[2] = [29, 30];
dateList[3] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
$(function () {
//添加可选年份
$(yearList).each(function (index, item) {
$selYear.append("<option value='" + item + "'>" + item + "</option>");
});
//选择年份
$selYear.change(function () {
$selMonth.attr("options").length = 1; //或者$selMonth.get(0).options.length = 1;
$selDate.attr("options").length = 1;
if ($(this).val() != "-1") {
$(monthList).each(function (index, item) {
$selMonth.append("<option value='" + item + "'>" + item + "</option>");
});
}
});
$selMonth.change(function () {
$selDate.attr("options").length = 1;
var month_temp = parseInt($(this).val());//获取选择的月份
if (month_temp != -1) {
//每月至少28天
$(dateList[3]).each(function (index, item) {
$selDate.append("<option value='" + item + "'>" + item + "</option>");
});
if (month_temp == 2) { //如果是2月份，则判断是平年还是闰年
var year_temp = parseInt($selYear.val());//获取选择的年份
if ((year_temp % 4 == 0 && year_temp % 100 != 0) || (year_temp % 400 == 0)) { //闰年，2月29天
$(dateList[1]).each(function (index, item) {
$selDate.append("<option value='" + item + "'>" + item + "</option>");
});
}
} else { //其他月份无需判断是平年还是闰年
switch (month_temp) { //判断月大还是月小
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
$(dateList[0]).each(function (index, item) {
$selDate.append("<option value='" + item + "'>" + item + "</option>");
});
break;
case 4:
case 6:
case 9:
case 11:
$(dateList[2]).each(function (index, item) {
$selDate.append("<option value='" + item + "'>" + item + "</option>");
});
break;
}
}
}
});
});
</script>