年月日联动select下拉菜单
Posted 贺小鸣
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了年月日联动select下拉菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> select{ font:20px/40px \'宋体\'; } option{width: 100px;} </style> </head> <body> <div id="box"> <select name="sel1" id="sel1"> <option value="year">年</option> </select> <select name="sel2" id="sel2"> <option value="month">月</option> </select> <select name="sel3" id="sel3"> <option value="day">日</option> </select> <!--<span id="result"></span>--> </div> <script> //生成日期 function creatDate(){ //生成1900年-2100年 for(var i = 1900; i<=2100;i++){ var option = document.createElement(\'option\'); option.setAttribute(\'value\',i); option.innerHTML = i; sel1.appendChild(option); } //生成1月-12月 for(var i = 1; i <=12; i++){ var option = document.createElement(\'option\'); option.setAttribute(\'value\',i); option.innerHTML = i; sel2.appendChild(option); } //生成1日—31日 for(var i = 1; i <=31; i++){ var option = document.createElement(\'option\'); option.setAttribute(\'value\',i); option.innerHTML = i; sel3.appendChild(option); } } creatDate(); //保存某年某月的天数 var days; //年份点击 sel1.onclick = function(){ //月份显示默认值 sel2.options[0].selected = true; //天数显示默认值 sel3.options[0].selected = true; } //月份点击 sel2.onclick = function(){ //天数显示默认值 sel3.options[0].selected = true; //计算天数的显示范围 //如果是2月 if(sel2.value == 2){ //如果是闰年 if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0){ days = 29; //如果是平年 }else{ days = 28; } //如果是第4、6、9、11月 }else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){ days = 30; }else{ days = 31; } //增加或删除天数 //如果是28天，则删除29、30、31天(即使他们不存在也不报错) if(days == 28){ sel3.remove(31); sel3.remove(30); sel3.remove(29); } //如果是29天 if(days == 29){ sel3.remove(31); sel3.remove(30); //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option(\'29\',\'29\'),undefined) } } //如果是30天 if(days == 30){ sel3.remove(31); //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option(\'29\',\'29\'),undefined) } //如果第30天不存在，则添加第30天 if(!sel3.options[30]){ sel3.add(new Option(\'30\',\'30\'),undefined) } } //如果是31天 if(days == 31){ //如果第29天不存在，则添加第29天 if(!sel3.options[29]){ sel3.add(new Option(\'29\',\'29\'),undefined) } //如果第30天不存在，则添加第30天 if(!sel3.options[30]){ sel3.add(new Option(\'30\',\'30\'),undefined) } //如果第31天不存在，则添加第31天 if(!sel3.options[31]){ sel3.add(new Option(\'31\',\'31\'),undefined) } } } //结果显示 // box.onclick = function(){ // //当年、月、日都已经为设置值时 // if(sel1.value !=\'year\' && sel2.value != \'month\' && sel3.value !=\'day\'){ // var day = new Date(sel1.value,sel2.value-1,sel3.value).getDay(); // result.innerHTML = sel1.value + \'年\' + sel2.value + \'月\' + sel3.value + \'日\' + \'星期\' + changDay(day); // }else{ // result.innerHTML = \'\'; // } // } //星期格式切换 // function changDay(num){ // switch(num){ // case 0: // return \'日\'; // case 1: // return \'一\'; // case 2: // return \'二\'; // case 3: // return \'三\'; // case 4: // return \'四\'; // case 5: // return \'五\'; // case 6: // return \'六\'; // } // } </script> </body> </html>
来源 http://www.cnblogs.com/xiaohuochai/p/5877594.html
以上是关于年月日联动select下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章