IE6下select z-index无效div被遮挡解决办法

作者：袖梨 2022-06-25

解决方法之一：Iframe包裹select元素

使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：

代码如下	复制代码
china japanese U.S.A

解决方法之二：以Iframe作为div的子元素，覆盖select元素

建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用

代码如下	复制代码
这里可以包含其他dom元素

javascript解决办法

显示div的同时隐藏select

代码如下

复制代码

function cover(s){
s.onmouseout = hideSelect;
s.onblur = hideSelect;
if (s.onchange==null)
s.onchange = resetSelectValue;
else{
s.doOnchange = s.onchange;
s.onchange = function(){this.doOnchange();resetSelectValue()}
}
var t = document.createElement("input");
t.style.width = s.offsetWidth;
t.value = s.options[s.selectedIndex].text;
t.onmouseover = showSelect
document.body.insertBefore(t,s)
s.style.display="none";
}
function showSelect(){
var e = event.srcElement;
e.style.display="none";
e.nextSibling.style.display="inline";
}
function hideSelect(){
var e = event.srcElement;
e.style.display="none";
e.previousSibling.style.display="inline";
e.blur();
}
function resetSelectValue(){
var e = event.srcElement;
e.previousSibling.value = e.options[e.selectedIndex].text
e.blur();
}
//-->