JS option操作

最新推荐文章于 2023-08-04 09:00:58 发布

山外人家

最新推荐文章于 2023-08-04 09:00:58 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/liyujia6636/article/details/52368115

版权

<!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>