• new Option()——实现时间联动


     

    1、基础准备:

      先来了解下,如何运用js实现select动态添加option。

    //1.动态创建select
    function createSelect(){
        var mySelect = document.createElement("select");
        mySelect.id = "mySelect"; 
        document.body.appendChild(mySelect);
    }
    
    //2.添加选项option
    function addOption(){
        //根据id查找对象,
        var obj=document.getElementById('mySelect');
        //添加一个选项
        obj.add(new Option("文本","值"));    //方法一:
        obj.options.add(new Option("text","value")); //方法二:
        for(var i=0;i<10;i++){
            obj.options[i]=new Option("新文本","新值");    //方法三:
        }
    }
    
    //3.删除所有选项option
    function removeAll(){
        var obj=document.getElementById('mySelect');
        obj.options.length=0;
    }
    
    //4.删除一个选项option
    function removeOne(){
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex;    //index,要删除选项的序号
        obj.options.remove(index);
    }
    
    //5.获得选项option的值
    var obj=document.getElementById('mySelect');
    var index=obj.selectedIndex;     //序号,取当前选中选项的序号
    var val = obj.options[index].value;
    
    //6.获得选项option的文本
    var obj=document.getElementById('mySelect');
    var index=obj.selectedIndex;    
    var val = obj.options[index].text;
    
    //7.修改选项option
    var obj=document.getElementById('mySelect');
    var index=obj.selectedIndex;    
    var val = obj.options[index]=new Option("新文本","新值");
    
    //8.删除select
    function removeSelect(){
        var mySelect = document.getElementById("mySelect");
        mySelect.parentNode.removeChild(mySelect);
    }

    2、时间联动实战

      demo:

      时间联动的要点就是天数随月份变化,考虑闰年,口诀:四年一润,百年不润,四百年再润。   下面直接看代码吧。

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <select id="year" name="year">
             <option>年份</option>
        </select>
        <select id="month" name="month">
             <option>月份</option>
        </select>
        <select id="day" name="day">
             <option>日</option>
        </select>
        <script>
            function formatDate(){};    
            formatDate.prototype={
                init:function(){
                    var _this = this;
                    yObj = document.getElementById("year");
                    mObj = document.getElementById("month");
                    dObj = document.getElementById("day");
                    this.yObj = yObj;
                    this.mObj = mObj;
                    this.dObj = dObj;
                    var year = new Date().getFullYear();
    
                    for(var i = year;i >= 1900;i--){
                        yObj.options.add(new Option(i,i));
                    }
    
                    for(var j=1;j<=12;j++){
                        mObj.options.add(new Option(j,j));
                    }    
    
                    yObj.onchange = function(){
                        _this.day();
                    }
                    mObj.onchange = function(){
                        _this.day();
                    }
                },
                day:function(){
                    this.dObj.options.length = 1
                    var y = this.yObj.options[yObj.selectedIndex].value;
                    var m = this.mObj.options[mObj.selectedIndex].value;
                    var days = [31,28,31,30,31,30,31,30,30,31,30,31]
                    if((y%4 == 0 && y%100 != 0) || y%400 == 0 ){
                        days[1]++;
                    }
                    for(var k = 1;k <= days[m-1]; k++){
                        this.dObj.options.add(new Option(k,k));
                    }
            }
        }
    
    
        var f = new formatDate();    
        f.init();
        </script>
    
    </body>
    </html>
  • 相关阅读:
    易优CMS:compare的基础用法
    易优CMS:switch的基础用法
    2019年创意可爱卡通小清新教育课件培训PPT模板
    简约清新立体商务年终工作总结汇报动态PPT模板
    中国古风唯美水墨工作计划汇报PPT模板推荐
    新学期教育教学小学家长会PPT模板推荐
    遇见手绘花卉小清新简约通用PPT模板推荐
    简约清新日系你好五月通用PPT模板推荐
    清新简约风格毕业论文答辩PPT模板推荐
    C# 中=>符号的使用
  • 原文地址:https://www.cnblogs.com/kongxs/p/4019348.html
Copyright © 2020-2023  润新知