jQuery實現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表示例
本文實例講述了jQuery實現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表。分享給大家供大家參考,具體如下:
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:這里再為大家推薦幾款時間及日期相關工具供大家參考使用:
在線日期/天數(shù)計算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數(shù)計算器:
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數(shù)差計算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具:
http://tools.jb51.net/code/unixtime
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
關于query Javascript CSS Selector engine
本篇文章,小編將為大家介紹,關于query Javascript CSS Selector engine,有需要的朋友可以參考一下2013-04-04jquery自定義插件——window的實現(xiàn)【示例代碼】
下面小編就為大家?guī)硪黄猨query自定義插件——window的實現(xiàn)【示例代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05JQuery.closest(),parent(),parents()尋找父結點
在50個必備的實用jQuery代碼段看到關于closest()方法的介紹,考慮到開發(fā)過程中經常有找爹的需求,以前用的都是parent()/parents()方法(還經常找不到?。?,所以就此研究對比一下!2012-02-02jQuery EasyUI API 中文文檔 - Form表單
jQuery EasyUI API 中文文檔 - Form表單,使用jQuery EasyUI的朋友可以參考下。2011-10-10jquery.form.js實現(xiàn)將form提交轉為ajax方式提交的方法
這篇文章主要介紹了jquery.form.js實現(xiàn)將form提交轉為ajax方式提交的方法,涉及jQuery插件實現(xiàn)form表單的Ajax提交技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04jQuery實現(xiàn)的鼠標經過時變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的鼠標經過時變寬的效果,實例演示了jQuery的Kwicks插件實現(xiàn)針對鼠標事件的響應與頁面元素樣式動態(tài)變換的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04