JS级联生成日期

来源：互联网发布：荣耀盒子pro知乎编辑：程序博客网时间：2024/06/07 10:06
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">        <title>Insert title here</title><script type="text/javascript">onload = function(){var yearSelect = document.getElementById("yearSelect");var monthSelect = document.getElementById("monthSelect");var dateSelect = document.getElementById("dateSelect");// 生成年份和月份下拉列表generateYear();generateMonth();// 当年份和月份下拉列表被点击时, 生成日期yearSelect.onchange = generateDate;monthSelect.onchange = generateDate;function generateDate(){// 获取dateSelect中的所有option, 循环遍历, 删除var optionArr = dateSelect.options;for (var x = 1; x < optionArr.length; x++)dateSelect.removeChild(optionArr[x--]);// dateSelect.options.length = 1;// 这里只保留0号元素, 其他全部删除// 获取当前选中的年份和月份var year = yearSelect.value;var month = monthSelect.value;if(year == "" || month == "")return;// 计算当前年当前月有多少天var days = 0;if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)days = 31;else if (month == 2)days = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;elsedays = 30;// 创建option, 添加到dateSelectfor (var x = 1; x <= days; x++) {var option = document.createElement("option");option.value = x;option.innerHTML = x;dateSelect.appendChild(option);}}function generateMonth(){for (var x = 1; x <= 12; x++) {var option = document.createElement("option");// 创建optionoption.value = x;// 设置valueoption.innerHTML = x;// 设置option中要显示的文本monthSelect.appendChild(option);// 将option添加到monthSelect}}function generateYear(){var currentYear = new Date().getFullYear();// 获取当前年份for (var x = currentYear; x > currentYear - 150; x--) {var option = document.createElement("option");// 创建optionoption.value = x;// 设置valueoption.innerHTML = x;// 设置option中要显示的文本yearSelect.appendChild(option);// 将option添加到yearSelect}}}</script>    </head>    <body>    <select id="yearSelect">    <option value="">-请选择年份-</option></select>    <select id="monthSelect">    <option value="">-请选择月份-</option></select>    <select id="dateSelect">    <option value="">-请选择日期-</option></select>    </body></html>