JS option操作

原创 2016年08月30日 12:16:56
<!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动态创建select 操作select和option

1.动态创建select

FireFox和IE下的select option JS相关操作

在FireFox中,很多的js操作与IE中是不同的。现在本文就不同操作给予说明。 JS 操作select 标签 1,     添加 option。 123 456 add o...

js 操作select和option

1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");     ...

在js中,option 的相关操作

javascript option
  • Q176782
  • Q176782
  • 2016年08月05日 09:02
  • 150

Js选择框脚本 移动操作select 标签中的 option 项的操作事项

题目:在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中。反之亦然。如下:在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中。反之亦然。 此问题需用到选择...

一般操作需要导入的jquery包(jquery.js包)和 jquery操作select下拉列表(取值及设置选中某一个option)

引入jquery的基本包 head部分:页面加载时,执行的js $(document).ready(function () { var currentDate =...

JS事件OPTION事件触发

  • 2008年02月29日 23:56
  • 851B
  • 下载

select通过js删除指定的option选项

  • 2017年05月06日 18:52
  • 730B
  • 下载

JS动态改变select选择变更option的index值

document.getElementById("louyuming").options[0].selected=true; function jsSelectIsExitItem(objSel...

option属性的js事件浏览器差异

  • 2011年09月27日 18:06
  • 854B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS option操作
举报原因:
原因补充:

(最多只允许输入30个字)