JS 实现的年月日三级联动

js文件

SYT="-请选择年份-";
SMT="-请选择月份-";
SDT="-请选择日期-";
BYN=50;//年份范围往前50年
AYN=5;//年份范围往后0年
function YMDselect(){
    this.SelY=document.getElementsByName(arguments[0])[0];
    this.SelM=document.getElementsByName(arguments[1])[0];
    this.SelD=document.getElementsByName(arguments[2])[0];
    this.DefY=this.SelD?arguments[3]:arguments[2];
    this.DefM=this.SelD?arguments[4]:arguments[3];
    this.DefD=this.SelD?arguments[5]:arguments[4];
    this.SelY.YMD=this;
    this.SelM.YMD=this;
    this.SelY.onchange=function(){YMDselect.SetM(this.YMD)};
    if(this.SelD)this.SelM.onchange=function(){YMDselect.SetD(this.YMD)};
    YMDselect.SetY(this)
};
//设置年份
YMDselect.SetY=function(YMD){
    dDate = new Date();
    dCurYear = dDate.getFullYear();
    YMD.SelY.options.add(new Option(SYT,'0'));
    for(i = dCurYear+AYN; i>(dCurYear-BYN); i--){
        YMDYT=i+'年';
        YMDYV=i;
        OptY = new Option(YMDYT,YMDYV);
        YMD.SelY.options.add(OptY);
        if(YMD.DefY==YMDYV) OptY.selected=true
    }
    YMDselect.SetM(YMD)
};
//设置月份
YMDselect.SetM=function(YMD){
    YMD.SelM.length = 0;
    YMD.SelM.options.add(new Option(SMT,'0'));
    if(YMD.SelY.value>0){
        for(var i=1;i<=12;i++){
            YMDMT=i+'月';
            YMDMV=i;
            OptM=new Option(YMDMT,YMDMV);
            YMD.SelM.options.add(OptM);
            if(YMD.DefM==YMDMV) OptM.selected=true
        }
    }
    if(YMD.SelD)YMDselect.SetD(YMD)
};
//设置日期
YMDselect.SetD=function(YMD){
    YI=YMD.SelY.value;
    MI=YMD.SelM.value;
    YMD.SelD.length = 0;
    YMD.SelD.options.add(new Option(SDT,'0'));
    if(YI>0 && MI>0){
        dPrevDate = new Date(YI, MI, 0);
        daysInMonth=dPrevDate.getDate();
        for (d = 1; d <= parseInt(daysInMonth); d++) {
            YMDDT=d+'日';
            YMDDV=d;
            OptD=new Option(YMDDT,YMDDV);
            YMD.SelD.options.add(OptD);
            if(YMD.DefD==YMDDV)OptD.selected=true
        }
    }
}

html文件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>js年月日三级联动</title>
    <script src ="js\YYYYMMDDClass.js"></script>
</head>

<body >

    <form action="" style="" method="get">
        <span>Birthday: </span>
        <select name="year"></select>
        <select name="month"></select>
        <select name="day"></select>
        <br>
        <button type="submit" value="submit">submit</button>
        <script>
            /**
             * 年月联动
             * new YMDselect('year','month');
             * new YMDselect('year','month',2010);//默认2010
             *new YMDselect('year','month',2010,2);//2010    2
             * */

            /**
             * 年月日联动
             * new YMDselect('year','month','day1');
             *new YMDselect('year','month','day1',2020);默认20020年
             * new YMDselect('year','month','day1',2020,6);默认20020年6月
             * new YMDselect('year','month','day',2020,6,22); 默认20020年6月22日
             * */
            new YMDselect('year','month','day');

        </script>

    </form>
</body>
</html>

JavaScript 用法

1.js文件外联

<head>
    <script src ="js\YYYYMMDDClass.js"></script>
</head>

2.直接用

<head>
    <script>
        alert("我的第一个 JavaScript");
    </script>
</head>

3.在body中用

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

更多用法请访问W3CSchool

JS 实现的年月日三级联动

猜你喜欢