html中div被select挡住各种问题总结与解决方法

作者:袖梨 2022-06-25

最好的方法:iframe来当作div的底

Div被Select挡住,是一个比较常见的问题。  
      有的朋友通过把div的内容放入iframe或object里来解决。  
      可惜这样会破坏页面的结构,互动性不大好。  
   
      这里采用的方法是:  
   
      虽说div直接盖不住select  
      但是div可以盖iframe,而iframe可以盖select,  
      所以,把一个iframe来当作div的底,  
      这个div就可以盖住select了.  

 

 代码如下 复制代码














Click to show DIV.




Click to hide DIV.

在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方式在IE中与FF/Chrome中的差异:
FF/Chrome中可以直接用selectDoc.selectedOptions获取到选中的option集合
IE中则没有selectedOptions属性(至少IE8,其他的没有测...)
如果 multiple="multiple" 则需要迭代所有option,用optionDoc.selected判断是否被选中,从而获取被选中的option集合
如果没有设置multiple的话,则可以直接用selectedIndex获取选中的option

相关文章

精彩推荐