页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

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

百度中搜索更多的关于实现一个年、月、季度联动SELECT的javascript代码内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：javascript 复选框选择/全选后特效
下一篇文章：javascript+css好多网站用的选星星实现打分功能的函数

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行