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

最新推荐文章于 2023-09-05 11:28:33 发布

莫欺少年穷

最新推荐文章于 2023-09-05 11:28:33 发布

阅读量1.4k

点赞数

文章标签： jquery function xhtml date 2010 脚本

本文链接：https://blog.csdn.net/NotOnlyForShe/article/details/7267510

版权

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

莫欺少年穷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
年-季度联动设置（纯JQuery版）

http://点击这里下载(然后在线播放) /TR/xhtml1/DTD/xhtml1-transitional.dtd">http:// 点击这里下载(然后在线播放) /1999/xhtml" > $(function() { //这里在网页中的节点都载入完毕时找到经常使用的三个节点对象，这样在以
复制链接

扫一扫