jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級聯(lián)下拉列表示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)態(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();//獲取當(dāng)前年份
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í)間及日期相關(guān)工具供大家參考使用:
在線日期/天數(shù)計(jì)算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計(jì)算器/相差天數(shù)計(jì)算器:
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數(shù)差計(jì)算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具:
http://tools.jb51.net/code/unixtime
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法
- jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能示例
- jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入特效
- 基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果
- jQuery動(dòng)態(tài)產(chǎn)生select option下拉列表
- jQuery簡單實(shí)現(xiàn)向列表動(dòng)態(tài)添加新元素的方法示例
- 如何使用Jquery動(dòng)態(tài)生成二級選項(xiàng)列表
- jQuery列表動(dòng)態(tài)增加和刪除的實(shí)現(xiàn)方法
相關(guān)文章
jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實(shí)現(xiàn)原理,需要的朋友可以參考下2015-02-02
教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
iframe因?yàn)槟芎途W(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分?jǐn)?shù)據(jù)成為可能,可是 iframe的大小卻不像層那樣可以“伸縮自如”,所以帶來了使用上的麻煩,給iframe設(shè)置高度的時(shí)候多了也不好,少了更是不行,今天我們就來分享2種使用jquery實(shí)現(xiàn)iframe自適應(yīng)高度的代碼2014-06-06
JQuery 實(shí)現(xiàn)在同一頁面錨點(diǎn)鏈接之間的平滑滾動(dòng)
JQuery 原來比我想象的要強(qiáng)大的多,本文用 JQuery 實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng),在同一頁面的錨點(diǎn)鏈接之間實(shí)現(xiàn)平滑的滾動(dòng)2014-10-10
jQuery選擇器源碼解讀(七):elementMatcher函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀(七):elementMatcher函數(shù),本文講解了源碼、功能、參數(shù)、返回函數(shù) 等內(nèi)容,需要的朋友可以參考下2015-03-03
jquery動(dòng)畫4.升級版遮罩效果的圖片走廊--帶自動(dòng)運(yùn)行效果
我將上一章中了插件做了個(gè)小小的升級,實(shí)現(xiàn)了自動(dòng)運(yùn)行效果,完整代碼大家見demo2012-08-08
淺析JQuery獲取和設(shè)置Select選項(xiàng)的常用方法總結(jié)
本篇文章是對JQuery獲取和設(shè)置Select選項(xiàng)的一些常用方法進(jìn)行了匯總介紹,有需要的朋友可以參考一下2013-07-07
jQuery+ajax中g(shù)etJSON() 用法實(shí)例
這篇文章主要介紹了jQuery+ajax中g(shù)etJSON() 用法實(shí)例,需要的朋友可以參考下2014-12-12
jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03

