您的位置：首页 > Web前端 > JavaScript

日期的三级联动（纯js）

2017-12-03 18:31 176 查看

<html>
<head>
<meta charset="UTF-8">
<title>日期三级联动</title>
<script>
//网页加载时初始化年月
window.onload=function() {
//初始的每月天数
m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先给年下拉框赋内容
for (var i =1970; i <2005; i++)
document.form.year.options.add(new Option(i , i));
//赋月份的下拉框
for (var i = 1; i < 13; i++)
document.form.month.options.add(new Option( i, i));
}

/**
* 年份发生变化时进行联动
* @param year
*/
function yearChange(year)
{
//获得下拉列表中月份
var month = document.form.month.options[document.form.month.selectedIndex].value;
if (month == "0") {
var opt = document.form.day;
dayOptionsClear(opt);
return;
}
if (month == 2 && IsPrimYear(str)) {
m[month - 1]=29;
}
writeDay(m[str - 1]);
}

/**
*根据月份的更改对天数列表联动
*/
function monthChange(month)
{
//获得年份，selectedIndex当前被选择的下标
var Y= document.form.year.options[document.form.year.selectedIndex].value;
if (Y== "0") {
var opt = document.form.day;
dayOptionsClear(opt);
}
if (month == 2 && IsPrimYear(Y)){
m[month - 1]=29;
}
writeDay(m[month - 1]);
}

/**
* 根据参数（当月的天数）添加天数的下拉列表
* @param day_number
*/
function writeDay(day_number) {
var opt = document.form.day;
dayOptionsClear(opt);
for (var i = 1; i < (day_number + 1); i++)
opt.options.add(new Option(i, i));
}

/**
* 判断是否为闰年
* @param year
* @returns {boolean}
* @constructor
*/
function IsPrimYear(year)
{
return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
}

//清空天数的下拉列表
function dayOptionsClear(opt) {
opt.options.length = 1;
}
</script>
</head>
<body>
<form name="form">
<select name="year" onChange="yearChange(this.value)">
<option value="0" selected>-请选择-</option>
</select>年
<select name="month" onChange="monthChange(this.value)">
<option value="0" selected>-请选择-</option>
</select>日
<select name="day">
<option value="0" selected>-请选择-</option>
</select>日
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航