The so-called linkage is the change of itself affected by the upper and lower elements. Common multi-level actions are used in the selection of year, month, day, country, shopping screening, etc. This case realizes the three-level linkage of year, month, day, and native js implementation, the effect is as shown in the figure above.
Most of them are multidimensional arrays or local data tables from the background database. The reason is very similar, except that js can judge the superior-subordinate relationship and get the child-parent index relationship.The same is true for the month and year of this example.
Years and months are good solutions, not affected by who, mainly the number of days per month is affected by years and months, leap year February 29, average year 29.1, 3, 5, 7, 8, 10, December 31, 4, 6, 9, and November 30 days, determine the year and month before the drop-down list display date.
Okay, that's the general idea. Look at the main code:
<form name=form1> <select name=YYYY onchange="YYYYMM(this.value)"> <option value="">year</option> </select> <select name=MM onchange="MMDD(this.value)"> <option value="">month</option> </select> <select name=DD> <option value="">day</option> </select> <span></span> </form>
Notes are available where the focus is
//Define the last day of the month array LastDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //Year drop-down box assignment var y = new Date().getFullYear(); var str = strYYYY.substring(0, strYYYY.length - 9); for (var i = (y - 30); i < (y + 30); i++) //This year, the first 30 years and the next 30 years { str += "<option value='" + i + "'> " + i + "</option>\r\n"; } document.form1.YYYY.outerHTML = str + "</select>"; document.form1.YYYY.value = y; //Drop-down box for month assignment //Assign Date Dropdown function YYYYMM(str) //Date changes when year changes(Major judgment is leap year) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; var n = LastDay[MMvalue - 1]; if (MMvalue == 2 && IsRun(str)) n++; writeDay(n) } function MMDD(str) //Date linkage when month changes { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; var n = LastDay[str - 1]; if (str == 2 && IsRun(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //Drop-down box for conditionally written dates { var s = strDD.substring(0, strDD.length - 9); for (var i = 1; i < (n + 1); i++) s += "<option value='" + i + "'> " + i + "</option>\r\n"; document.form1.DD.outerHTML = s + "</select>"; } function IsRun(year) //Determine whether leap year { return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0)) }
Finally, thank you for reading, code step by step GitHub.