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