javascript实现日期三级联动下拉框选择菜单
程序员文章站
2024-01-07 10:03:52
由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示:
编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,其他数据不变...
由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示:
编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,其他数据不变;
然后自己改了一下代码:
<html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>js年月日三级联动下拉框日期选择代码</title> </head> <body> <form name="reg_testdate"> <select name="yyyy" onchange="yyyydd(this.value)"> <option value="">请选择 年</option> </select> <select name="mm" onchange="mmdd(this.value)"> <option value="">选择 月</option> </select> <select name="dd" onchange="ddd(this.value)"> <option value="">选择 日</option> </select> </form> <script language="javascript"> var changedd = 1;//->一个全局变量 function yyyymmddstart() { monhead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new date().getfullyear(); for (var i = (y - 47); i < (y + 21); i++) //以今年为准,前30年,后30年 document.reg_testdate.yyyy.options.add(new option(" " + i + " 年", i)); //赋月份的下拉框 for (var i = 1; i < 13; i++) document.reg_testdate.mm.options.add(new option(" " + i + " 月", i)); document.reg_testdate.yyyy.value = y; document.reg_testdate.mm.value = new date().getmonth() + 1; var n = monhead[new date().getmonth()]; if (new date().getmonth() == 1 && ispinyear(yyyyvalue)) n++; writeday(n); //赋日期下拉框 //->赋值给日,为当天日期 // document.reg_testdate.dd.value = new date().getdate(); } if (document.attachevent) window.attachevent("onload", yyyymmddstart); else window.addeventlistener('load', yyyymmddstart, false); function yyyydd(str) //年发生变化时日期发生变化(主要是判断闰平年) { var mmvalue = document.reg_testdate.mm.options[document.reg_testdate.mm.selectedindex].value; if (mmvalue == "") { // var e = document.reg_testdate.dd; optionsclear(e); return; } var n = monhead[mmvalue - 1]; if (mmvalue == 2 && ispinyear(str)) n++; writeday(n) } function mmdd(str) //月发生变化时日期联动 { var yyyyvalue = document.reg_testdate.yyyy.options[document.reg_testdate.yyyy.selectedindex].value; if (yyyyvalue == "") { var e = document.reg_testdate.dd; optionsclear(e); return; } var n = monhead[str - 1]; if (str == 2 && ispinyear(yyyyvalue)) n++; writeday(n) } function writeday(n) //据条件写日期的下拉框 { var e = document.reg_testdate.dd; optionsclear(e); for (var i = 1; i < (n + 1); i++) { e.options.add(new option(" " + i + " 日", i)); if(i == changedd){ e.options[i].selected = true; //->保持选中状态 } } console.log(i); console.log(changedd); } function ispinyear(year) //判断是否闰平年 { return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0)); } function optionsclear(e) { e.options.length = 1; } //->随时监听日的改变 function ddd(str){ changedd = str; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读