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

时间：2021-04-20 08:58:53|栏目：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需再刷新一下页面才能执行]

上一篇：脚本安需导入(装载)的三种模式的对比

栏目：JavaScript代码

下一篇：ExtJs异步无法向外传值和赋值的完美解决办法

本文标题：实现一个年、月、季度联动SELECT的javascript代码

本文地址：http://www.codeinn.net/misctech/105321.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程