通过jQuery实现合理的年月日选择（select>option）

来源：互联网发布：linux的安全审计服务编辑：程序博客网时间：2024/05/16 11:30

表明需求：

1、选择月份为1、3、5、7、8、10、11时，日期为31；选择月份为4、6、8、10、12时，日期为30。

2、当年份为闰年时，月份选择2时，日期为29，否则为28。

代码1.0：

HTML代码部分：

<select name="birthday_year">

<option value="2000">2002</option>        <option value="2000">2001</option>        <option value="2000">2000</option>        <option value="1999" selected="selected">1999</option>        <option value="1998">1998</option>        <option value="1997">1997</option>        <option value="1996">1996</option>        <option value="1995">1995</option>        <option value="1994">1994</option></select><span>年</span><select name="birthday_month" id="birthday_month">        <option value="1" selected="selected">1</option></select><span>月</span><select name="birthday_day" id="birthday_day">        <option value="1" selected="selected">1</option></select><span>日</span>

jQuery代码部分：

functionselectBox(obj_id,n){//生成除第一个外的下拉列表
obj=document.getElementById(obj_id);
var i=1;
while(++i<=n){
obj.innerHTML+="<option value=\""+i+"\">"+i+"</option>";
}
}
selectBox("birthday_month",12);

$('select')[1].onchange=function(){//重点：onchange()函数，识别下拉列表选改变后选中的值
var i=this.value;
$('select')[2].innerHTML="<option value=\"1\">1</option>";//重置
if(i==1||i==3||i==5||i==7||i==8||i==10||i==11){
selectBox("birthday_day",31);
}else if(i==2){
var year=$('select')[0].value;
if((year%4==0 && year%100!=0) || (year%400==0))
{
selectBox("birthday_day",29);
}else{
selectBox("birthday_day",28);
}
}else{
selectBox("birthday_day",30);
}
}

$('select')[0].onchange=function(){//临时改变年份后
var i=this.value;
if((i%4==0 &&i%100!=0) || (i%400==0)){
if($('select')[2].value==2){
$('select')[2].innerHTML="<option value=\"1\">1</option>";
selectBox("birthday_day",29);
}else{
$('select')[2].innerHTML="<option value=\"1\">1</option>";
selectBox("birthday_day",28);
}
}
}

阅读全文

0 0