Select when a layer encounters a drop-down box that always blocks the Select box? In fact, this is the bug of IE, other browsers do not have this problem, for this issue a lot of forums, here to provide my several methods, each has its own advantages, mistakes, have a good opinion of the people put forward, thank you.
1. The most direct way: hide the Drop-down box.
A more general set of functions is provided below:
Test.htm
------------
<script>
var hideelementtemp = new Array ();
When you click on the menu, call this function, the menu object
function Cal_hideelementall (obj) {
Cal_hideelement ("IMG", obj);
Cal_hideelement ("select", obj);
Cal_hideelement ("OBJECT", obj);
Cal_hideelement ("IFRAME", obj);
}
function Cal_hideelement (strelementtagname,obj) {
try{
var showdivelement = obj;
var calendardiv = obj;
var intdivleft = Cal_getoffsetleft (showdivelement);
var intdivtop = cal_getoffsettop (showdivelement);//+showdivelement.offsetheight;
Hideelementtemp=new Array ()
For (I=0;i<window.document.all.tags (strelementtagname). length; i++) {
var objtemp = window.document.all.tags (Strelementtagname) [i];
if (!objtemp| |! Objtemp.offsetparent)
Continue
var intobjleft=cal_getoffsetleft (objtemp);
var intobjtop=cal_getoffsettop (objtemp);
if (((intobjleft+objtemp.clientwidth) >intdivleft) &&
(intobjleft<intdivleft+calendardiv.style.poswidth) &&
(intobjtop+objtemp.clientheight>intdivtop) &&
(Intobjtop<intdivtop+calendardiv.style.posheight)) {
The length of the Var inttempindex=hideelementtemp.length;//already
Save Elementtagname is Stutas
Hideelementtemp[inttempindex]=new Array (objtemp,objtemp.style.visibility);
Hideelementtemp[hideelementtemp.length]=objtemp
Objtemp.style.visibility= "hidden";
}
}
}catch (e) {alert (e.message)
}
}
function Cal_showelement () {
var i;
for (i=0;ivar objtemp = Hideelementtemp[i]
if (!objtemp| |! Objtemp.offsetparent)
Continue
Objtemp.style.visibility= '
}
Hideelementtemp=new Array ();
}
function Cal_getoffsetleft (SRC) {
var set=0;
if (src && src.name!= "Divmain") {
if (src.offsetparent) {
Set+=src.offsetleft+cal_getoffsetleft (src.offsetparent);
}
if (Src.tagName.toUpperCase ()!= "Body") {
var x=parseint (src.scrollleft,10);
if (!isnan (x))
Set-=x;
}
}
return set;
}
function Cal_getoffsettop (SRC) {
var set=0;
if (src && src.name!= "Divmain") {
if (src.offsetparent) {
Set+=src.offsettop+cal_getoffsettop (src.offsetparent);
}
if (Src.tagName.toUpperCase ()!= "Body") {
var y=parseint (src.scrolltop,10);
if (!isnan (y))
Set-=y;
}
}
return set;
}
</script>
<select></select>
<select></select>
<div style= "position:absolute;left:0;top:0;width:100;height:100;background-color:red" onclick= "Cal_ Hideelementall (This) ">
Click let Select Hide
</div>
<br><br><br><br><br><br>
<input type= "button" value= "Click let Select Display" onclick= "cal_showelement ()" >
The above method, if the number of the Select box is less, relatively fixed, directly with obj.style.visibility= "hidden" to hide is more direct.
2.Object objects have higher precedence and can block the Select box
<object id=aa style= "display:none;z-index:1000; Position:absolute; top:0; left:0; width:152; height:200 "type=" Text/x-scriptlet "data=" About:<body><div style= ' position:absolute;left:0;top:0;width : 152;height:200;font:14;color:white;background:black;border:1 solid black ' >test</div> ' ></object >
<select><option>hellohellohellohello</select><button onclick=aa.style.display= aa.style.display== ' None '? ': ' None ' >test</button>
Although this method is simple, it is not a good solution for complex layers.
3. Using an IFRAME as a carrier
The following is a simple example:
-----------
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "generator" content= "Microsoft FrontPage 4.0" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<title> simple Menu </title>
<!--
Provide a positioning function, using an IFRAME as a carrier, will not be blocked by select
by Fason (2003-5-21)
-->
<style id=s>
#div1 {
Pos
