Self-written date month day three level linkage effect jquery Plugin

Source: Internet
Author: User


Haha, for a long time did not write post, the reason is the recent research with the jquery UI to achieve the ability to intercept avatars, haha


At times, we will use the three-level linkage effect on the user profile page with a date of one month and day. Found on the Internet, did not see how appropriate (mainly this cock silk inclined to use jquery as a plug-in form, haha ~ ~)

This blog post, the main purpose is to show you I use jquery as a plug-in form.

The simple principle is to judge a leap year, and then append option to the display date when the Select Change event occurs.

(PS. Do not know why, JS has AppendChild method, you can keep inserting child without overwriting, but jquery does not, append new child will be the previous cover, feel good egg pain said, this cock silk plan to write a comprehensive plug-in later, Put these handy small functions in the package, please look forward to it ~ ~)

No limit to the tube, chrysanthemum everywhere open ~ ~ ~ Roar, the code below. I named him birthday.


;(function ($) {$.fn.birthday = function (options) {var opts = $.extend ({}, $.fn.birthday.defaults, Options),//integrated parameter Var $ye AR = $ (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 = "";    Add the year for (i = y; I >= (y-80); i--) {con + = "<option value= '" +i+ "' >" +i+ "Year" + "</option>";    } $year. append (con);    con = "";    Add month for (i = 1;i <=; i++) {con + = "<option value= '" +i+ ">" +i+ "month" + "</option>";    } $month. append (con);    con = ""; Add date var n = monhead[0];//default display first month for (i = 1; I <= n; i++) {con + = "<option value= '" +i+ ">" +i+ "Day" + "</opt    Ion> ";    } $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)) {//If it is a leap year var c = ""; for (var i = 1; i <=; i++) { c + = "<option value=" "+i+" > "+i+" Day "+" </option> ";}    $day. Append (c); }else {//If not a leap year also selected February var c = ""; for (var i = 1; I <= monhead[selectedmonth-1]; i++) {c + = "<option value= '" +i+ ">" +i+ "Day" + "</option>";}    $day. Append (c);    }});    }; $.fn.birthday.isrunyear = function (selectedyear) {return (0 = = selectedyear% 4 && (selectedyear%100! = 0 | | selecte Dyear% 400 == 0));    }; $.fn.birthday.defaults = {year: ' Year ', Month: ' Month ', Day: ' Day '};}) (JQuery);

The code is short, but it's also good to use, as follows:

HTML section, you need to set the name to select

<div id= "Birthday_container" ><select name= "year" ></select><select name= "Month" ></ Select><select name= "Day" ></select></div>

JS section, after the introduction of this JS file (note the reference to the jquery library file), after the page is loaded, the following code is introduced:

Level three date linkage $ ("#birthday_container"). Birthday ();

is not very simple ah, haha, provide the JS:

jquery Implementation Date Month day three level linkage plugin

Non-toxic Uncensored No Ads ~


With a poem for entertainment ~ ~ Guess the artistic conception of it, haha

After the empty mountain Xinyu,

The Cowboy rode the Ox,

Take chrysanthemum under the East fence,

Think of your hometown.


If you have any questions or comments, please add qq:1740437



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.