三级联动下拉选项（年月日选择）

发表于 | 分类于

jq实现三级联动年月日…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>三级联动年月日</title>
        <meta name="keywords" content="关键字列表" />
        <meta name="description" content="网页描述" />
        <link rel="stylesheet" type="text/css" href="" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        <style>
            body{padding: 0;margin: 0;}
            .content{width: 1000px;margin: 50px auto;padding: 0;}
        </style>
    </head>
    <body>
        <div class="content">
            <select id="year">
                <option value="0">--请选择--</option>
            </select>年
            <select id="month">
                <option value="0">--请选择--</option>
            </select>月
            <select id="day">
                <option value="0">--请选择--</option>
            </select>日
        </div>
        <script>
            (function(){
                function selectFun(eleId,start,end){                    
                    for(start;start<=end;start++){
                        eleId.add(new Option(start,start));
                    }
                }
                var startY=1970;
                var end=new Date().getFullYear();
                var year=document.getElementById("year");
                var month=document.getElementById("month");
                var day=document.getElementById("day")
                selectFun(year,startY,end);
                year.onchange=function(){
                    month.length=1;
                    day.length = 1;
                    if(this.value!=0){                        
                        selectFun(month,1,12);
                    }
                }
                month.onchange=function(){
                    day.length = 1;
                    var value=this.value;
                    if(value!=0){
                        if(value==2){
                            console.log('2----');
                            if(ifRunYear(year.value)){
                                selectFun(day,1,29);
                            }else{
                                selectFun(day,1,28);
                            }
                        }else if(value==4||value==6||value==9||value==11){
                            console.log('30----');
                            selectFun(day,1,30);
                        }else{
                            console.log('31----');
                            selectFun(day,1,31);
                        }                        
                    }                    
                }
                function ifRunYear(year){
                    return (year% 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0);
                }
            })();
        </script>
    </body>
</html>

热评文章