<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form autocomplete="off">
<select name="year" id="year">
<option value="0" selected="selected">--</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>年
<select name="month" id="month">
<option value="0" selected="selected">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="date" id="date">
<option value="0" selected="selected">--</option>
</select>日
</form>
<script>
// 事件兼容
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
if (element.removeHandler) {
element.removeHandler(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
// 获取年月日的节点
var oYear = document.getElementById("year");
var oMonth = document.getElementById("month");
var oDate = document.getElementById("date");
var days, val_year, val_month;
// 初始化年、月、日,避免缓存造成天数的缺失(Firefox)
oYear.options[0].selected = 'selected';
oMonth.options[0].selected = 'selected';
oDate.options[0].selected = 'selected';
// 根据年月得到月份天数的函数
function countDays(year, month) {
if(year<=0 || month<=0){
return -1;
}
var days_in_months = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if (month == 2) {
// 判定闰年
return ((year % 4 == 0) && ((year % 100) != 0)) || ((year % 400) == 0) ? 29 : 28;
} else {
return days_in_months[month - 1];
}
}
// js动态添加option的函数
function addOptions() {
// 通过设定select的length达到删除option的目的
oDate.length = 1;
// 获取select的option的value值
val_year = oYear.options[oYear.selectedIndex].value;
val_month = oMonth.options[oMonth.selectedIndex].value;
// 计算得到天数
days = countDays(val_year, val_month);
// js动态添加option选项
for (var i = 1; i <= days; i++) {
oDate.options[oDate.length] = new Option(i.toString(), i.toString());
}
}
// 当“年份”的选择改变时触发change事件
var year_handler = function(event) {
if (oYear.options[0].selected === true) {
oMonth.options[0].selected = 'selected';
oDate.options[0].selected = 'selected';
}
addOptions();
}
// 当“月份”的选择改变时触发change事件
var month_handler = function(event) {
if (oYear.options[0].selected === true) {
oMonth.options[0].selected = 'selected';
oDate.options[0].selected = 'selected';
}
if (oMonth.options[0].selected === true) {
oDate.options[0].selected = 'selected';
}
addOptions();
}
// 当“天数”的选择改变时触发change事件
var date_handler = function(event) {
if (oMonth.options[0].selected === true) {
oDate.options[0].selected = 'selected';
}
}
// 绑定年份、月份、天数的事件
EventUtil.addHandler(oYear, 'change', year_handler);
EventUtil.addHandler(oMonth, 'change', month_handler);
EventUtil.addHandler(oDate, 'change', date_handler);
</script>
</body>
</html>
JS option操作
最新推荐文章于 2023-08-04 09:00:58 发布