项目选中SELECT相关Bug整理

最新推荐文章于 2023-11-23 16:45:06 发布

dyl_love98

最新推荐文章于 2023-11-23 16:45:06 发布

阅读量317

点赞数

文章标签：项目选中

本文链接：https://blog.csdn.net/javablogs/article/details/8869067

版权

上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。今天在这里和大家一起学习一下项目选中

IE6下的select 的 z-index一直高于其他素元，即没法被其他素元覆盖住。

解决方法：JQueryUI的做法是在IE6下当触发弹出层时，将想覆盖住的select隐藏

在IE7及以下虽然disabled 对 select能起作用，但对select下的option却效无。

解决方法通常是判断浏览器，如果是IE7以下的话，则当change和focus时转变option色颜和并且点击“效无”的option后 select选中的项值不化变

//判断是不是是IE7以下浏览器
if (navigator.appVersion.indexOf("MSIE 5.5") >= 0 || navigator.appVersion.indexOf("MSIE 6.0") >= 0
    || navigator.appVersion.indexOf("MSIE 7.0") >= 0) {

    window.attachEvent("onload", function() {
        ReloadSelectElement();

        //给有所select添加件事
        function ReloadSelectElement() {
            var s = document.getElementsByTagName("select");
            if (s.length > 0) {
                for (var i = 0, select; select = s[i]; i++) {
                    (function(e) {
                        //取得点焦时，将前当选中的项目记录下来
                        e.attachEvent("onfocus", function() {
                            e.setAttribute("current", e.selectedIndex);
                        });
                        //项目转变时，如果选中的是“效无”的项目，则返回返回前一状态
                        e.attachEvent("onchange", function() {
                            restore(e);
                        });
                    })(select)
                    //将含有disabled属性的项目“效无化”
                    emulate(select);
                }
            }
        }

        function restore(e) {
            if (e.options[e.selectedIndex].disabled) {
                e.selectedIndex = e.getAttribute("current");
            }
        }

        function emulate(e) {
            for (var i = 0, option; option = e.options[i]; i++) {
                if (option.disabled) {
                    option.style.color = "graytext";
                }
                else {
                    option.style.color = "menutext";
                }
            }
        }
    })
}

获取选中的option集合(即有所被选中的option)的方式在IE中与FF/Chrome中的差异：

如果select没有设置multiple的话(即单选的下拉菜单)，可以直接用selectedIndex获取选中的option位置。

但是，当 multiple="multiple"时(即可多选的菜单)，如果想获取到有所被选中的option集合，

FF/Chrome中可以直接用selectDoc.selectedOptions

而IE(IE8及以下)中则没有可以直接获取被选中的option集合的属性或方法

IE(IE8及以下)解决方法：

如果 multiple="multiple" 则需要迭代有所option，用optionDoc.selected判断是不是被选中，从而获取被选中的option集合

在IE(6,7,8)下向select中插入option时看不到option中文本的Bug：

先来看一组IE下事故现场

再看代码

每日一道理
青春，有嬉笑声与哭泣声夹杂的年华，青春的少年是蓝天中翱翔的幼鹰，虽然没有完全长大，有些稚气，有些懵懂，脱不开父母的双手却极力想去找寻属于自己的一片天空，为的是一时的激情，为的是一种独自翱翔的感觉！

<select  id="s" style="width:100px;background:lightskyblue"></select>
<select  id="s2" style="width:100px;background:lightgrey"></select>
<script>
    var s = document.getElementById("s");
    
    //方式1
    s.add(new Option("A", 1));

    //方式2
    s.appendChild(new Option("B", 2));

    //方式3
    s.insertBefore(new Option("C", 3),s.options[2]);

    //方式4
    s.options[3] = new Option("D", "B");
    //或者s.options.add(new Option("D","B");

    //方式5
    var op = document.createElement("option");
    op.appendChild(document.createTextNode("E"));
    s.appendChild(op);

    //方式6
    var s2 = document.getElementById("s2");
    s2.innerHTML = "<option>X</option><option>Y</option>";
</script>

正常来讲这5种方法都应该是没问题的。可结果是方法2,3,6失效。

解决方法的话。。只能是避开这个坑，使用1,4,5方法吧！

文章结束给大家分享下程序员的一些笑话语录：一个程序员对自己的未来很迷茫，于是去问上帝。
"万能的上帝呀，请你告诉我，我的未来会怎样？"
上帝说"我的孩子，你去问Lippman，他现在领导的程序员的队伍可能是地球上最大的"
于是他去问Lippman。
Lippman说"程序员的未来就是驾驭程序员"
这个程序员对这个未来不满意，于是他又去问上帝。
"万能的上帝呀，请你告诉我，我的未来会怎样？"
上帝说"我的孩子，你去问Gates，他现在所拥有的财产可能是地球上最多的"
于是他去问Gates。
Gates说"程序员的未来就是榨取程序员"
这个程序员对这个未来不满意，于是他又去问上帝。
"万能的上帝呀，请你告诉我，我的未来会怎样？"
上帝说"我的孩子，你去问侯捷，他写的计算机书的读者可能是地球上最多的"
于是他去问侯捷。
侯捷说"程序员的未来就是诱惑程序员"
这个程序员对这个未来不满意，于是他又去问上帝。
"万能的上帝呀，请你告诉我，我的未来会怎样？"
上帝摇摇头"唉，我的孩子，你还是别当程序员了"）