JS option操作

来源：互联网发布：java map源码解析编辑：程序博客网时间：2024/06/01 08:16
<!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>
0 0