JQuery练习——年月日级联查询

最新推荐文章于 2022-12-25 12:16:16 发布

qingYun1029

最新推荐文章于 2022-12-25 12:16:16 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript 文章标签： jquery function xhtml html 2010

本文链接：https://blog.csdn.net/qingyun1029/article/details/6794495

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

qingYun1029

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery练习——年月日级联查询

HTML代码：年：-年- 月：-月- 日：-日-JavaScript代码： var $selYear = $("#selYear"); var $selMonth = $("#selMonth"); va
复制链接

扫一扫