欧百情感网

搜索

您的当前位置：首页实现一个年、月、季度联动SELECT的javascript代码_表单特效

实现一个年、月、季度联动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>

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需刷新才能执行]

Copyright © 2019- obaigo.com 版权所有

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务