Heim > Artikel > Web-Frontend > Javascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen
Javascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen
- 零下一度Original
- 2017-04-19 18:02:551921Durchsuche
Dieser Artikel stellt hauptsächlich die JavaScript-Implementierung des Dropdown-Feldauswahlmenüs für die dreistufige Verknüpfung von Datum und Tag vor. Es hat einen bestimmten Referenzwert kann darauf verweisen
Da meine Arbeit das Bearbeiten von Geburtstagsdaten umfasst, verwenden Sie die obige URL für Jahr, Monat und Tag: Fehlertipp:
Bearbeiten Sie das [Jahr] oder den [Monat] des Geburtstages Spalte und der spezifische [Tag], der zuvor gespeichert wurde, werden nicht angezeigt. Das Produkt sagte, dass die anderen Daten unverändert bleiben, egal welche Daten bearbeitet werden.
Dann habe ich den Code selbst geändert:
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>JS年月日三级联动下拉框日期选择代码</title>
</head>
<body>
<form name="reg_testdate">
<select name="YYYY" onChange="YYYYDD(this.value)">
<option value="">请选择 年</option>
</select>
<select name="MM" onChange="MMDD(this.value)">
<option value="">选择 月</option>
</select>
<select name="DD" onChange="DDD(this.value)">
<option value="">选择 日</option>
</select>
</form>
<script language="JavaScript">
var changeDD = 1;//->一个全局变量
function YYYYMMDDstart() {
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先给年下拉框赋内容
var y = new Date().getFullYear();
for (var i = (y - 47); i < (y + 21); i++) //以今年为准，前30年，后30年
document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
//赋月份的下拉框
for (var i = 1; i < 13; i++)
document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
document.reg_testdate.YYYY.value = y;
document.reg_testdate.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框
//->赋值给日，为当天日期
// document.reg_testdate.DD.value = new Date().getDate();
}
if (document.attachEvent)
window.attachEvent("onload", YYYYMMDDstart);
else
window.addEventListener('load', YYYYMMDDstart, false);
function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
if (MMvalue == "") {
// var e = document.reg_testdate.DD;
optionsClear(e);
return;
}
var n = MonHead[MMvalue - 1];
if (MMvalue == 2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
if (YYYYvalue == "") {
var e = document.reg_testdate.DD;
optionsClear(e);
return;
}
var n = MonHead[str - 1];
if (str == 2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
var e = document.reg_testdate.DD;
optionsClear(e);
for (var i = 1; i < (n + 1); i++)
{
e.options.add(new Option(" " + i + " 日", i));
if(i == changeDD){
e.options[i].selected = true; //->保持选中状态
}
}
console.log(i);
console.log(changeDD);
}
function IsPinYear(year) //判断是否闰平年
{
return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
}
function optionsClear(e) {
e.options.length = 1;
}
//->随时监听日的改变
function DDD(str){
changeDD = str;
}
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonJavascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!