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