jQuery實現動態生成年月日級聯下拉列表示例

來源：懂視網責編：小采時間：2020-11-27 21:57:15

jQuery實現動態生成年月日級聯下拉列表示例

jQuery實現動態生成年月日級聯下拉列表示例:本文實例講述了jQuery實現動態生成年月日級聯下拉列表。分享給大家供大家參考，具體如下： html代碼： <form name=form1 id=dateForm> <select name=year></select>年 <select name=mont

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery實現動態生成年月日級聯下拉列表示例:本文實例講述了jQuery實現動態生成年月日級聯下拉列表。分享給大家供大家參考，具體如下： html代碼： <form name=form1 id=dateForm> <select name=year></select>年 <select name=mont

本文實例講述了jQuery實現動態生成年月日級聯下拉列表。分享給大家供大家參考，具體如下：

html代碼：

<form name="form1" id="dateForm">
 <select name="year"></select>年
 <select name="month"></select>月
 <select name="day"></select>日
</form>

JS代碼：

$(function(){
 var i=1945;
 var date=new Date();
 var year=date.getFullYear();//獲取當前年份
 var dropList;
 for(var i;i<2017;i++){
 if(i==year){
 dropList=dropList+"<option value='"+i+"' selected>"+i+"</option>";
 }else {
 dropList=dropList+"<option value='"+i+"'>"+i+"</option>";
 }
 }
 $('#dateForm select[name=year]').html(dropList);//生成年份下拉列表
 var monthly;
 for(var j=1;j<13;j++){
 monthly=monthly+'<option value="'+j+'">'+j+'</option>'
 }
 $('#dateForm select[name=month]').html(monthly);//生成月份下拉列表
 var daily;
 for(var day=1;day<=31;day++){
 daily=daily+'<option value="'+day+'">'+day+'</option>';
 }
 $('#dateForm select[name=day]').html(daily);
 $('#dateForm select[name=month]').change(function(){
 var currentDay;
 var total;
 var flag=$('#dateForm select[name=year]:selected').val();
 var currentMonth=$('#dateForm select[name=month]').val();
 switch (currentMonth){
 case "1":
 case "3":
 case "5":
 case "7":
 case "8":
 case "10":
 case "12":total=31;break;
 case "4":
 case "6":
 case "9":
 case "11":total=30;break;
 case "2":
 //閏年 整除4但是不整除100 或者整除400
 if( (flag%4==0 && flag%100!=0 ) || flag%400){
 total=29;
 }else {
 total=28;
 }
 default :break
 }
 for(day=1;day<=total;day++){
 currentDay=currentDay+'<option value="'+day+'">'+day+'</option>'
 }
 $('#dateForm select[name=day]').html(currentDay);//生成日期下拉列表
 });
});

PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：

在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc

在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com