實現一個年、月、季度聯動SELECT的javascript代碼

2019-11-21 02:01:11

字體：大中小

來源：轉載

供稿：網友

<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事件模型代碼

下一篇：javascript 復選框選擇/全選后特效