年-季度联动设置（纯JQuery版）

最新推荐文章于 2025-06-03 09:11:22 发布

原创最新推荐文章于 2025-06-03 09:11:22 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #xhtml #date #2010 #脚本

本文介绍了一种动态设置网页年度、季度选择器的方法，并实现实时更新，通过JavaScript实现用户交互与数据展示之间的无缝连接。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://点击这里下载(然后在线播放) /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:// 点击这里下载(然后在线播放) /1999/xhtml" >
<head>
<title></title>

            //根据所选年度为起始季度下拉框设置正确的季度值
            var setStartJD = function() {
                var date = new Date();
                var customYear = yearBar.val();
                var currentYear = date.getFullYear();
                //var currentMonth = date.getMonth() + 1;
                //在设置两个季度下拉框时一定要先清空下拉框，否则会出现重复的季度，切记
                startJD[0].options.length = 0;

                if (customYear < currentYear) {
                    //如果选择的不是今年，则在起始季度下拉框中四个季度都显示
                    startJD[0].options[startJD[0].length] = new Option("一季度", "1");
                    startJD[0].options[startJD[0].length] = new Option("二季度", "2");
                    startJD[0].options[startJD[0].length] = new Option("三季度", "3");
                    startJD[0].options[startJD[0].length] = new Option("四季度", "4");
                }
                else {
                    //如果选择的是今年则在起始季度下拉框中只显示已经过去的季度
                    var currentMonth = date.getMonth() + 1;
                    if (currentMonth > 3) {
                        startJD[0].options[startJD[0].length] = new Option("一季度", "1");
                    }
                    if (currentMonth > 6) {
                        startJD[0].options[startJD[0].length] = new Option("二季度", "2");
                    }
                    if (currentMonth > 9) {
                        startJD[0].options[startJD[0].length] = new Option("三季度", "3");
                    }
                }
            }

            //根据起始季度下拉框的当前值为终止季度设置正确的值
            var setEndJD = function() {
                endJD[0].options.length = 0;
                var selectedIndex = startJD[0].selectedIndex;
                for (var i = selectedIndex, j = 0; i < startJD[0].options.length; i++, j++) {
                    endJD[0].options[j] = new Option(startJD[0].options[i].text, startJD[0].options.value);
                }
            }

            //为年份选择框注册一个监听事件,当选择的年份变化时，起始季度和终止季度要随着变化
            yearBar.change(function() {
                setStartJD();
                setEndJD();
            });

            //为起始年度下拉框添加一个监听事件,当起始下拉框改变所选季度的时候，动态改变终止季度下拉框的值
            startJD.change(function() {
                setEndJD();
            });

            //在页面初次载入的时候初始化起始季度和终止季度下拉框
            yearBar.trigger("change");
        });
    </script>

</head>
<body>
    <div>
        <select id="yearBar">
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
        </select>
        <p></p>
        <select id="startJD">

        </select>
        <p></p>
        <select id="endJD">

        </select>
    </div>
</body>
</html>