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动态添加options操作

动态删除select中的所有options:         document.getElementById("ddlResourceType").options.length=0;     ...
  • u011972571
  • u011972571
  • 2014年12月26日 16:27
  • 2395

js操作select option

1、获取选中select的value和text,html代码如下: select id="mySelect"> option value="1">one/option> op...
  • cakexuexi
  • cakexuexi
  • 2014年05月28日 11:26
  • 233

JS操作option

删除select中的所有OPTION document.getElementById("select的ID").options.length = 0; 为select添加一个option doc...
  • yuan8222
  • yuan8222
  • 2013年04月30日 17:45
  • 418

js 操作select option

$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'}); $("#custcol7 option[value="...
  • wuxing164
  • wuxing164
  • 2015年07月24日 22:28
  • 417

操作select的option隐藏或显示的插件

XShowHideOption是一个用于操作select的option隐藏或显示的插件,您可以指定相应的option进行显示或隐藏,而不必对其移除操作。不依赖其它任何插件,且适用于IE6+、Firef...
  • luoyeyu1989
  • luoyeyu1989
  • 2016年02月09日 18:03
  • 4268

怎样用JS给,option添加“选中”属性

window.onload = function(){ var opts = document.getElementById("select"); var valu...
  • shipeng22022
  • shipeng22022
  • 2013年03月20日 17:26
  • 9103

通过JS更改Option的隐藏于显示

主要还是通过对Style的修改来实现隐藏和显示,修改的关键字位"display",修改的代码如下: document.getElementById("id_select").options[x].s...
  • kkle1994
  • kkle1994
  • 2017年03月21日 10:16
  • 406

JS动态添加option和删除option

js自动创建和删除option 本文转载自http://www.jb51.net/article/35205.htm 仅供学习之用,留着随时查看动态创建...
  • qq_21703215
  • qq_21703215
  • 2017年02月28日 15:40
  • 2447

js 获取html的select中的option的值

html代码: Volvo Saab Opel Audi 获取方法: var obj = document.getElementByIdx_x(”testSele...
  • linuf
  • linuf
  • 2015年04月03日 20:56
  • 5469

js 操作select和option

js 操作select和option 1.动态创建select      function createSelect(){ var mySelect = document.cre...
  • Joey_zoe
  • Joey_zoe
  • 2014年08月15日 14:05
  • 239
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS option操作
举报原因:
原因补充:

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