管理资源吧首页>>>教程>>>编程>>>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>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20GetValue()%7B%20%0D%0A%20%20%20%20var%20objlist%20%3D%20document.getElementsByTagName(%22SELECT%22)%3B%20%0D%0A%20%20%20%20var%20tmp%20%3D%20new%20Array()%3B%20%0D%0A%20%20%20%20var%20tap%20%3D%20objlist%5B0%5D.options%5Bobjlist%5B0%5D.selectedIndex%5D.text%3B%20%0D%0A%20%20%20%20strTmp%3D%22%22%3B%20%0D%0A%20%20%20%20var%20j%20%3D%201%3B%20%0D%0A%20%20%20%20for(var%20i%3D1%3Bi%3Cobjlist.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(objlist%5Bi%5D.style.display!%3D%22none%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20strTmp%20%2B%3D%20objlist%5Bi%5D.options%5Bobjlist%5Bi%5D.selectedIndex%5D.text%20%2B%20%22-%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20j%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20strTmp%20%3D%20strTmp.substring(0%2CstrTmp.length-1)%3B%20%0D%0A%20%20%20%20alert(tap)%3B%20%0D%0A%20%20%20%20alert(strTmp)%3B%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20hideAll()%7B%20%0D%0Afor(i%3D1%3Bi%3C5%3Bi%2B%2B)%7B%20%0D%0Avar%20select%20%3D%20document.getElementById(%22submenu_%22%2Bi)%3B%20%0D%0Awhile(select.options.length%3E0)%7B%20%0D%0Aselect.options.remove(0)%3B%20%0D%0A%7D%20%0D%0Aselect.style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20initSelect(index)%7B%20%0D%0Avar%20select%20%3D%20document.getElementById(%22submenu_%22%2Bindex)%3B%20%0D%0Avar%20now%20%3D%20new%20Date()%3B%20%0D%0Avar%20currentYear%20%3D%20now.getYear()%3B%20%0D%0Avar%20month%20%3D%20now.getMonth()%3B%20%0D%0Aswitch(index)%7B%20%0D%0Acase%201%3A%20%0D%0Afor(i%3D-5%3Bi%3C%3D5%3Bi%2B%2B)%7B%20%0D%0Avar%20value%20%3D%20currentYear%2Bi%3B%20%0D%0Avar%20item%20%3D%20new%20Option(value%2Cvalue)%3B%20%0D%0Aselect.options.add(item)%3B%20%0D%0A%7D%20%0D%0Aselect.selectedIndex%20%3D%205%3B%20%0D%0Aselect.style.display%20%3D%20%22block%22%3B%20%0D%0Abreak%3B%20%0D%0Acase%202%3A%20%0D%0Avar%20semiyears%20%3D%20new%20Array(%22%E4%B8%8A%E5%8D%8A%E5%B9%B4%22%2C%22%E4%B8%8B%E5%8D%8A%E5%B9%B4%22)%3B%20%0D%0Afor(i%3D0%3Bi%3C2%3Bi%2B%2B)%7B%20%0D%0Avar%20item%20%3D%20new%20Option(semiyears%5Bi%5D%2Ci%2B1)%3B%20%0D%0Aselect.add(item)%3B%20%0D%0A%7D%20%0D%0Aselect.selectedIndex%20%3D%20Math.floor(month%2F6)%3B%20%0D%0Aselect.style.display%20%3D%20%22block%22%3B%20%0D%0Abreak%3B%20%0D%0Acase%203%3A%20%0D%0Avar%20quarters%20%3D%20new%20Array(%22%E4%B8%80%E5%AD%A3%E5%BA%A6%22%2C%22%E4%BA%8C%E5%AD%A3%E5%BA%A6%22%2C%22%E4%B8%89%E5%AD%A3%E5%BA%A6%22%2C%22%E5%9B%9B%E5%AD%A3%E5%BA%A6%22)%3B%20%0D%0Afor(i%3D0%3Bi%3C4%3Bi%2B%2B)%7B%20%0D%0Avar%20item%20%3D%20new%20Option(quarters%5Bi%5D%2Ci%2B1)%3B%20%0D%0Aselect.add(item)%3B%20%0D%0A%7D%20%0D%0Aselect.selectedIndex%20%3D%20Math.floor(month%2F3)%3B%20%0D%0Aselect.style.display%20%3D%20%22block%22%3B%20%0D%0Abreak%3B%20%0D%0Acase%204%3A%20%0D%0Avar%20months%20%3D%20new%20Array(%22%E4%B8%80%E6%9C%88%22%2C%22%E4%BA%8C%E6%9C%88%22%2C%22%E4%B8%89%E6%9C%88%22%2C%22%E5%9B%9B%E6%9C%88%22%2C%22%E4%BA%94%E6%9C%88%22%2C%22%E5%85%AD%E6%9C%88%22%2C%22%E4%B8%83%E6%9C%88%22%2C%22%E5%85%AB%E6%9C%88%22%2C%22%E4%B9%9D%E6%9C%88%22%2C%22%E5%8D%81%E6%9C%88%22%2C%22%E5%8D%81%E4%B8%80%E6%9C%88%22%2C%22%E5%8D%81%E4%BA%8C%E6%9C%88%22)%3B%20%0D%0Afor(i%3D0%3Bi%3C12%3Bi%2B%2B)%7B%20%0D%0Avar%20item%20%3D%20new%20Option(months%5Bi%5D%2Ci%2B1)%3B%20%0D%0Aselect.add(item)%3B%20%0D%0A%7D%20%0D%0Aselect.selectedIndex%20%3D%20month%3B%20%0D%0Aselect.style.display%20%3D%20%22block%22%3B%20%0D%0Abreak%3B%20%0D%0Adefault%3A%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20displaySubmenu(command)%7B%20%0D%0AhideAll()%3B%20%0D%0Aif(command%20!%3D%20%22none%22)%7B%20%0D%0Avar%20commands%20%3D%20command.split(%22%2C%22)%3B%20%0D%0Afor(l%3D0%3Bl%3Ccommands.length%3Bl%2B%2B)%7B%20%0D%0AinitSelect(parseInt(commands%5Bl%5D))%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body>

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

教程首页更多教程