首页 > 代码库 > 自写日期年月日三级联动效果jquery插件

自写日期年月日三级联动效果jquery插件


哈哈,好久没写新博文啦,原因是最近一直在研究用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=http://www.mamicode.com/'"+i+"'>"+i+"年"+"";>
代码很简短,但是也很好用,用法如下:

html部分,需要给select设置name

<div id="birthday_container">
<select name="year"></select>
<select name="month"></select>
<select name="day"></select>
</div>

js部分,引入此js文件后(注意放在引用的jquery库文件后面),在页面加载完毕后引入如下代码:

//三级日期联动
$("#birthday_container").birthday();

是不是很简单呀,哈哈,提供该js的下载地址:

jquery实现日期年月日三级联动插件

无毒无码无广告~偷笑


附拼诗一首以供娱乐~~猜下其中的意境吧,哈哈害羞

空山新雨后,

牧童骑黄牛,

采菊东篱下,

低头思故乡。


有任何疑问或指教,请加QQ:1740437