だんだん心魅かれてく
2019-05-15 19:56
采纳率: 50%
浏览 379

小白求救!各位大神麻烦帮我看下这个select显示的内容为什么不变化

经过各位大神的指点,我对代码进行了修改,解决了月份和日期的显示问题。但是现在还有一个毛病没想明白,就是年份那一框不管选择哪一年,显示的都是请选择,我鼠标都戳爆了也没用,就像图上这样。图片说明抓瞎中。。。跪求各位大神不吝赐教。(附上修改后的代码)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">

            //这个方法是点击年份下拉框后显示1900至今的所有年份
            function GetYear() {
                var yearNode = document.getElementById("year");

                //要调用Date的方法,就必须创建其对象,不能直接用类名调用
                var date = new Date();

                //这里获取的是从1900年到现在的经过的年数
                var year = date.getFullYear();
                //alert(time);//测试代码

                //要对之前的数据进行删除,否则会累加,不能对i进行变化,否则会无法全部删除
                //在删除之前要先获取yearNode的子节点个数
                var children = yearNode.childNodes;

                //这里之前出错了,因为忘记加上.length了
                for (var i = 2; i < children.length;) {
                //alert(children.length);
                    yearNode.removeChild(children[i]);
                }
                //yearNode.length = 1;

                //这里是将各个年份作为option添加进代表年份的select下拉框中
                for (var i = 1900; i <= year; i ++) {
                    var option = document.createElement("option");
                    option.innerHTML = i;
                    //option.value = i;
                    yearNode.appendChild(option);
                }
            }

            //这个方法是年份下拉框的内容发生变化时会运行的内容
            function ChooseYear() {

                //月份
                var monthNode = document.getElementById("month");

                monthNode.length = 1;

                for (var i = 1; i <= 12; i ++) {
                    var option = document.createElement("option");
                    option.innerHTML = i;
                    option.value = i;
                    monthNode.appendChild(option);
                }

            }

            function ChooseMonth() {

                var yearNode = document.getElementById("year");
                var monthNode = document.getElementById("month");

                //日期
                var dateNode = document.getElementById("date");

                dateNode.length = 1;

                if(monthNode.value == 1|| monthNode.value == 3|| monthNode.value == 5|| monthNode.value == 7|| monthNode.value == 8|| monthNode.value == 10|| monthNode.value == 12) {
                    for (var i = 1; i <= 31; i ++) {
                        var option = document.createElement("option");
                        option.innerHTML = i;
                        dateNode.appendChild(option);
                    }
                } else if (monthNode.value == 4|| monthNode.value == 6|| monthNode.value == 9|| monthNode.value == 11) {
                    for (var i = 1; i <= 30; i ++) {
                        var option = document.createElement("option");
                        option.innerHTML = i;
                        dateNode.appendChild(option);
                    }
                } else if(monthNode.value == 2&& yearNode.value%4 == 0) {
                    for (var i = 1; i <= 29; i ++) {
                        var option = document.createElement("option");
                        option.innerHTML = i;
                        dateNode.appendChild(option);
                    }
                } else if(monthNode.value == 2&& yearNode.value%4 != 0) {
                    for (var i = 1; i <= 28; i ++) {
                        var option = document.createElement("option");
                        option.innerHTML = i;
                        dateNode.appendChild(option);
                    }
                }

            }

        </script>

    </head>
    <body>
        <select  id="year" onclick="GetYear()" onchange="ChooseYear()">
            <option>请选择</option>
        </select>年
        <select id="month" onchange="ChooseMonth()">
            <option>请选择</option>
        </select>月
        <select id="date">
            <option>请选择</option>
        </select>日
    </body>

</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 前端○萌妹 2019-05-16 09:26
    已采纳

    年份是没有问题的,问题出现在月的选择上,ChooseTime()这个方法中对月份中的option值进行了赋值,当你选择了月份后,执行了ChooseTime()这个方法,又重新对月份进行了赋值

    点赞 评论
  • qq_39380885 2019-05-15 20:31

    因为你的原始程序错了,在select后面的编程也出现了错误

    点赞 评论
  • aha1234aha 2019-05-15 20:47

    下拉列表支持多选项时,size的属性的值需要设置大于1.

    点赞 评论
  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
    
            <script type="text/javascript">
    
                //这个方法是点击年份下拉框后显示1900至今的所有年份
                window.onload = function GetYear() {
                    var yearNode = document.getElementById("year");
    
                    //要调用Date的方法,就必须创建其对象,不能直接用类名调用
                    var date = new Date();
    
                    //这里获取的是从1900年到现在的经过的年数
                    var year = date.getFullYear();
                    //alert(time);//测试代码
    
                    //要对之前的数据进行删除,否则会累加,不能对i进行变化,否则会无法全部删除
                    //在删除之前要先获取yearNode的子节点个数
                    var children = yearNode.childNodes;
    
                    //这里之前出错了,因为忘记加上.length了
                    for (var i = 2; i < children.length;) {
                    //alert(children.length);
                        yearNode.removeChild(children[i]);
                    }
                    //yearNode.length = 1;
    
                    //这里是将各个年份作为option添加进代表年份的select下拉框中
                    for (var i = 1900; i <= year; i ++) {
                        var option = document.createElement("option");
                        option.innerHTML = i;
                        //option.value = i;
                        yearNode.appendChild(option);
                    }
                    //alert("i");
                }
    
                //这个方法是年份下拉框的内容发生变化时会运行的内容
                function ChooseYear() {
    
                    //月份
                    var monthNode = document.getElementById("month");
    
                    monthNode.length = 1;
    
                    for (var i = 1; i <= 12; i ++) {
                        var option = document.createElement("option");
                        option.innerHTML = i;
                        option.value = i;
                        monthNode.appendChild(option);
                    }
    
                }
    
                //当月份下拉框内容发生变化时这里会运行噢
                function ChooseMonth() {
    
                    var yearNode = document.getElementById("year");
                    var monthNode = document.getElementById("month");
    
                    //日期
                    var dateNode = document.getElementById("date");
    
                    dateNode.length = 1;
    
                    //根据大小月和平闰年对日期下拉框添加不同元素
                    if(monthNode.value == 1|| monthNode.value == 3|| monthNode.value == 5|| monthNode.value == 7|| monthNode.value == 8|| monthNode.value == 10|| monthNode.value == 12) {
                        for (var i = 1; i <= 31; i ++) {
                            var option = document.createElement("option");
                            option.innerHTML = i;
                            dateNode.appendChild(option);
                        }
                    } else if (monthNode.value == 4|| monthNode.value == 6|| monthNode.value == 9|| monthNode.value == 11) {
                        for (var i = 1; i <= 30; i ++) {
                            var option = document.createElement("option");
                            option.innerHTML = i;
                            dateNode.appendChild(option);
                        }
                    } else if(monthNode.value == 2&& yearNode.value%4 == 0) {
                        for (var i = 1; i <= 29; i ++) {
                            var option = document.createElement("option");
                            option.innerHTML = i;
                            dateNode.appendChild(option);
                        }
                    } else if(monthNode.value == 2&& yearNode.value%4 != 0) {
                        for (var i = 1; i <= 28; i ++) {
                            var option = document.createElement("option");
                            option.innerHTML = i;
                            dateNode.appendChild(option);
                        }
                    }
    
                }
    
            </script>
    
        </head>
        <body>
            <!--
                注意:1.onclick在不同浏览器的处理方式不同,在chrome中,点击下拉框中的选项也会触发onclick,就等于一致重新加载,导致年份框中显示的内容始终是请选择
                    2.我尝试过将onclick变成onmousedown,但是结果在IEedge上不兼容,年份那一框只能添加一次,第二次再去点击就没有下拉框弹出了
                处理方式:在页面加载时就将year添加进去,(window.onload)
            -->
    
            <select  id="year" onchange="ChooseYear()">
                <option>请选择</option>
            </select>年
            <select id="month" onchange="ChooseMonth()">
                <option>请选择</option>
            </select>月
            <select id="date">
                <option>请选择</option>
            </select>日
        </body>
    
    </html>
    
    

    经过大神指点,我找出了问题所在。
    年份那一栏显示出bug主要还是浏览器兼容性问题,这个onclick事件在IE中点击下拉框只会触发一次,而在chrome中在点击下拉框中的选项时也会触发一次,就导致了年份无限循环加载,使得框里的内容一直是"请选择",所以在chrome等浏览器中就没法选择年份了。
    我还尝试过把onclick改成了onmousedown,这下在chrome里面年份倒是可以正常选择了,但是到了IEedge这儿又不兼容了,下拉框里的年份加载一次以后再去点击就不会弹出来了。
    最后我放弃在select里面添加这个事件,直接在页面加载完毕就把年份也添加到下拉框里。(我还没学到jQuery,所以ready还不会用,这里只能先用window,onload了)
    这次bug让我对浏览器兼容问题的认识加深了一点,之前没遇到过这样的问题,导致这次直接抓瞎,但这真的是一次很宝贵的经验,知道了一个新的bug起因,以后再出这种问题也能往这个方向去想了。
    最后感谢为我答疑解惑的各位大神,在此奉上格子衫一件,霸王若干。区区薄礼,不成敬意。(滑稽)图片说明图片说明

    点赞 评论

相关推荐 更多相似问题