哈哈,好久没写新博文啦,原因是最近一直在研究用jquery UI实现截取头像的功能,哈哈
言归正传,有时候呢,我们会在用户资料的页面用到一个年月日日期的三级联动效果。在网上找了找,没看到有多么合适的(主要是本屌丝倾向于用jquery写成插件的形式使用,哈哈~~)
这篇博文呢,主要目的是给大家看下我用jquery写成插件的形式。
原理很简单,就是判断闰年,然后在select change事件的时候给显示日期的select重新append option
(PS.不知道为啥,js有appendchild 方法,可以不停的插入child而不会覆盖,但是jquery却没有,append新的child会把之前的覆盖,感觉好蛋疼的说,本屌丝打算以后写个综合插件,把这些好用的小功能都封装进去,敬请期待吧~~)
撸管无极限,菊花遍地开~~~吼吼,下面上代码。我给他取名叫birthday
;(function($){ $.fn.birthday = function(options){ var opts = $.extend({}, $.fn.birthday.defaults, options);//整合参数 var $year = $(this).children("select[name="+ opts.year +"]"); var $month = $(this).children("select[name="+ opts.month +"]"); var $day = $(this).children("select[name="+ opts.day +"]"); MonHead = [31,28,31,30,31,30,31,31,30,31,30,31]; return this.each(function(){ var y = new Date().getFullYear(); var con = ""; //添加年份 for(i = y; i >= (y-80); i--){ con += "<option value='"+i+"'>"+i+"年"+"</option>"; } $year.append(con); con = ""; //添加月份 for(i = 1;i <= 12; i++){ con += "<option value='"+i+"'>"+i+"月"+"</option>"; } $month.append(con); con = ""; //添加日期 var n = MonHead[0];//默认显示第一月 for(i = 1; i <= n; i++){ con += "<option value='"+i+"'>"+i+"日"+"</option>"; } $day.append(con); $.fn.birthday.change($(this)); }); }; $.fn.birthday.change = function(obj){ obj.children("select[name="+ $.fn.birthday.defaults.year +"],select[name="+ $.fn.birthday.defaults.month +"]").change(function(){ var $year = obj.children("select[name="+ $.fn.birthday.defaults.year +"]"); var $month = obj.children("select[name="+ $.fn.birthday.defaults.month +"]"); var $day = obj.children("select[name="+ $.fn.birthday.defaults.day +"]"); $day.empty(); var selectedYear = $year.find("option:selected").val(); var selectedMonth = $month.find("option:selected").val(); if(selectedMonth == 2 && $.fn.birthday.IsRunYear(selectedYear)){//如果是闰年 var c =""; for(var i = 1; i <= 29; i++){ c += "<option value='"+i+"'>"+i+"日"+"</option>"; } $day.append(c); }else {//如果不是闰年也没选2月份 var c = ""; for(var i = 1; i <= MonHead[selectedMonth-1]; i++){ c += "<option value='"+i+"'>"+i+"日"+"</option>"; } $day.append(c); } }); }; $.fn.birthday.IsRunYear = function(selectedYear){ return(0 == selectedYear % 4 && (selectedYear%100 != 0 || selectedYear % 400 == 0)); }; $.fn.birthday.defaults = { year:"year", month:"month", day:"day" }; })(jQuery);
html部分,需要给select设置name
<div id="birthday_container"> <select name="year"></select> <select name="month"></select> <select name="day"></select> </div>
//三级日期联动 $("#birthday_container").birthday();
无毒无码无广告~
附拼诗一首以供娱乐~~猜下其中的意境吧,哈哈
空山新雨后,
牧童骑黄牛,
采菊东篱下,
低头思故乡。
有任何疑问或指教,请加QQ:1740437
自写日期年月日三级联动效果jquery插件,布布扣,bubuko.com
原文:http://blog.csdn.net/kabulore/article/details/37904967