zoukankan      html  css  js  c++  java
  • js实现表单联动

        <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;
                     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>
  • 相关阅读:
    关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别
    三星R428 内存不兼容金士顿2G DDR3
    IE (6-11)版本,在使用iframe的框架时,通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况
    按键精灵 vbs 获取网页源码 xp系统被拒绝
    threejs 组成的3d管道,寻最短路径问题
    javaweb部署多个项目(复制的项目)
    添加无登录权限的SSH用户命令
    Using Blocks in iOS 4: Designing with Blocks
    Using Blocks in iOS 4: The Basics
    Understanding Objective-C Blocks
  • 原文地址:https://www.cnblogs.com/ar13/p/8252615.html
Copyright © 2011-2022 走看看