对于不同月份我要显示不同的天数,但select的option不能够使用display等方法进行隐藏,于是在网上查了查,整理了一下资料,写出了以下可以正常使用的代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
<head> <title>对select中option的操作(隐藏和显示)</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> <!-- //得到某年某月的天数 function DayNumOfMonth(Year,Month) { if(Year == ''){ var thedate = new Date(); Year = thedate.getYear(); } var d = new Date(Year,Month,0); return d.getDate(); }
//隐藏某个select中的option function hideone(theselect,index) { var oldOption = theselect.children(index); var oldStr = oldOption.innerText; var newOption = document.createElement('<div' + oldOption.outerHTML.match(/(<\w*)([^>]*)(>)/)[2] +'>'); newOption.innerText = oldStr; newOption.swapNode(oldOption); }
//显示隐藏的某个select中的option function showone(theselect,index) { var oldOption = theselect.children(index); if(oldOption.tagName=='DIV') { var oldStr = oldOption.innerText; var newOption = document.createElement('<option' + oldOption.outerHTML.match(/(<\w*)([^>]*)(>)/)[2] +'>'); newOption.innerText = oldStr; newOption.swapNode(oldOption); } }
//根据月份隐藏或显示option function checkdate(theselect1, theselect2){ var themonth = theselect1.value; var themaxdate = DayNumOfMonth('',themonth); for(i=28; i<themaxdate; i++){ showone(theselect2,i); } if (themaxdate != 31) { for(i=themaxdate; i<31; i++){ hideone(theselect2,i); } } } //--> </script> </head>
<body>
<form name="theForm" method="post" style="text-align: center"> <select οnchange="checkdate(theForm.Start1,theForm.Start2)" name="Start1"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> 月 <select name="Start2"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> 号 </form> <script language="javascript"> <!-- //预设默认的月份的天数 checkdate(theForm.Start1,theForm.Start2); //--> </script>
</body>
</html>
</select> 号 </form> <script language="javascript"> <!-- //预设默认的月份的天数 checkdate(theForm.Start1,theForm.Start2); //--> </script>
</body>
</html>