关注公众号 jb51net

关闭

首页 > 网络编程 > JavaScript > 表单特效 >

实现一个年、月、季度联动SELECT的javascript代码

2007-07-01 00:00:00 作者：

实现一个年、月、季度联动SELECT的javascript代码

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章: