<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label {
display: inline-block;
width: 80px;
height: 30px;
text-align: right;
margin-top: 20px;
}
</style>
</head>
<body>
<label for="">出生日期：</label>
<!-- name 改的话 要改css js -->
<select name="date_year" id="year" class="n">
</select>
<span>年</span>
<select name="date_month" id="year" class="n">
</select>
<span>月</span>
<select name="date_day" id="year" class="n">
</select>
<span>日</span>
<br>
<script>
TLmonth = [‘1‘, ‘3‘, ‘5‘, ‘7‘, ‘8‘, ‘10‘, ‘12‘];
var data_year = document.querySelector(‘select[name=date_year]‘),
data_year = document.querySelector(‘select[name=date_year]‘),
data_month = document.querySelector(‘select[name=date_month]‘),
data_day = document.querySelector(‘select[name=date_day‘),
select = document.getElementsByTagName(‘select‘);
/*
要求：当前年份的前28年 - 18年
*/
function agoDate() {
var date = new Date(); // 获取当前年份
var now_year = date.getFullYear();
var agone_year = now_year - 28; // 28年前的年份
var agone_date = new Date(agone_year + ‘-01-01‘); // 28 年前的时间
return agone_year;
}
function export_year() {
var year = agoDate();
for (var i = 0; i < 18; i++) {
data_year.add(new Option(year + i, year + i))
}
}
function export_month() {
var index = data_year.selectedIndex;
var selected = data_year.options[index]; //选择的年
for (var i = 1; i <= 12; i++) {
data_month.add(new Option(i, i))
}
}
// 输出 天数
function export_day() {
var index = data_year.selectedIndex;
var year = data_year.options[index].value; //选择的年
var index = data_month.selectedIndex;
var month = data_month.options[index].value; //选择的月
// 判断是不是润年
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
if (month == ‘2‘) {
each_day(29)
}
else {
var bol = Judgment(month);
// console.log(bol)
// 判断是不是31天
if (bol) {
each_day(31)
} else {
each_day(30)
}
}
}
else {
if (month == ‘2‘) {
each_day(28)
}
else {
var bol = Judgment(month);
// console.log(bol)
if (bol) {
each_day(31)
}
else {
each_day(30)
}
}
}
}
// 遍历输出 天
function each_day(num) {
data_day.innerHTML = ‘‘;
for (var i = 1; i <= num; i++) {
data_day.add(new Option(i, i))
}
}
// 判断月份
function Judgment(month) {
var bol = TLmonth.indexOf(month);
if (bol >= 0) {
return true;
}
else {
return false;
}
}
// 选择了年份的时候输出月
data_year.onchange = function () {
export_month()
}
// 选择了月份的时候输出日
data_month.onchange = function () {
export_day()
}
// 默认选择项目
function selected_() {
export_year()
select[0][0].selected = true;
export_month()
select[1][0].selected = true;
export_day()
}
// 默认选中
selected_()
</script>
</body>
</html>实现表单联动
Posted AR13
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现表单联动相关的知识，希望对你有一定的参考价值。
以上是关于实现表单联动的主要内容，如果未能解决你的问题，请参考以下文章