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

 

<!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>

    <script src="../JS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(function() {
            //这里在网页中的节点都载入完毕时找到经常使用的三个节点对象，这样在以后要使用时就不用每一次再去索引要查找的DOM对象，
            //可以加快脚本执行速度
            var startJD = $("#startJD");
            var endJD = $("#endJD");
            var yearBar = $("#yearBar");

            //根据所选年度为起始季度下拉框设置正确的季度值
            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>