一个实现年、月、季度联动SELECT的js代码,有需要的朋友可以参考下。
<html>
<body>
<table border=0 height=30px >
<tr>
<td width=80px>
<select onchange="displaySubmenu(this.value)">
<option value="none">请选择报告类型</option>
<option value="1,4">月度报告</option>
<option value="1,3">季度报告</option>
<option value="1,2">半年报告</option>
<option value="1">年度报告</option>
</select>
</td>
<td>
<select id="submenu_1" name="year" style="display:none;"></select>
</td>
<td>
<select id="submenu_2" name="semiyear" style="display:none;"></select>
<select id="submenu_3" name="quarter" style="display:none;"></select>
<select id="submenu_4" name="month" style="display:none;"></select>
</td>
<td>
<input id="ok" type="button" onClick='GetValue();' value="取值">
</td>
</tr>
</table>
<script>
function GetValue(){
var objlist = document.getElementsByTagName("SELECT");
var tmp = new Array();
var tap = objlist[0].options[objlist[0].selectedIndex].text;
strTmp="";
var j = 1;
for(var i=1;i<objlist.length;i++){
if(objlist[i].style.display!="none"){
strTmp += objlist[i].options[objlist[i].selectedIndex].text + "-";
j++;
}
}
strTmp = strTmp.substring(0,strTmp.length-1);
alert(tap);
alert(strTmp);
}
function hideAll(){
for(i=1;i<5;i++){
var select = document.getElementById("submenu_"+i);
while(select.options.length>0){
select.options.remove(0);
}
select.style.display = "none";
}
}
function initSelect(index){
var select = document.getElementById("submenu_"+index);
var now = new Date();
var currentYear = now.getYear();
var month = now.getMonth();
switch(index){
case 1:
for(i=-5;i<=5;i++){
var value = currentYear+i;
var item = new Option(value,value);
select.options.add(item);
}
select.selectedIndex = 5;
select.style.display = "block";
break;
case 2:
var semiyears = new Array("上半年","下半年");
for(i=0;i<2;i++){
var item = new Option(semiyears[i],i+1);
select.add(item);
}
select.selectedIndex = Math.floor(month/6);
select.style.display = "block";
break;
case 3:
var quarters = new Array("一季度","二季度","三季度","四季度");
for(i=0;i<4;i++){
var item = new Option(quarters[i],i+1);
select.add(item);
}
select.selectedIndex = Math.floor(month/3);
select.style.display = "block";
break;
case 4:
var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
for(i=0;i<12;i++){
var item = new Option(months[i],i+1);
select.add(item);
}
select.selectedIndex = month;
select.style.display = "block";
break;
default:
break;
}
}
function displaySubmenu(command){
hideAll();
if(command != "none"){
var commands = command.split(",");
for(l=0;l<commands.length;l++){
initSelect(parseInt(commands[l]));
}
}
}
</script>
</body>