解决select遮挡div三种方法（自己总结）

[size=large]最近在项目中实现过程中遇到select遮挡div的问题，查阅了网上很多资料解决方法无非3个。
其一：用IFRAME
其二：隐藏显示select
其三：用html模拟下拉框
解决方法一：在要弹出div里加入iframe
如下：

<style>
.div_iframe{position:absolute;width:100%;height:100%;z-index:-1;frameborder:0;border:0px}
</style>
<div id="divid"><iframe class="div_iframe"></frame></div>

解决方法二：
思想：在打开div前隐藏所有select，div关闭后显示select
如下：

function DisplaySelect(val){
var displayType;
var arrdisplayType=['hidden','visible'];
var arrObjContSelect=document.getElementByTagName("select");
for(i=0;i<arrObjContSelect.lenght;i++){
arrObjContSelect[i].style.visibility=arrdisplayType[i];
}
}
DisplaySelect(0);//隐藏select
DisplaySelect(1);//显示select

解决方法三：

<script type="text/javascript">
// JavaScript Document by www.pyzy.net
var pyzy={/*总JS对象*/};
pyzy.$ = function(id){return document.getElementById(id);}; //根据ID取得某对象的方法
pyzy.$T = function(fctTagName,fctParentObj){ //根据TagName取得某对象的方法
 if(fctParentObj==null)fctParentObj=document;
 return fctParentObj.getElementsByTagName(fctTagName);
};
pyzy.c$ = function(fctInObj,fctTagName,fctObjId,fctStyle){
 if(fctInObj==null){
  alert("要用来插入["+fctTagName+"#"+fctObjId+"]的容器对象不存在！\n\n请检查创建功能是否写在了容器加载之前。");
  return true;
 }else{
  var newObj = document.createElement(fctTagName);
  newObj.id=fctObjId;
  newObj.style.cssText=fctStyle;
  fctInObj.appendChild(newObj);
  try{return newObj;}
  finally{newObj = null;}
 }
};
//取得对象的绝对位置以及宽高
pyzy.getPosition = function(obj){
 var top=0;
 var left=0;
 var width=obj.offsetWidth;
 var height=obj.offsetHeight;
 while(obj.offsetParent){
  top+=obj.offsetTop;
  left+=obj.offsetLeft;
  obj=obj.offsetParent;
 }
 return{"top":top,"left":left,"width":width,"height":height};
};

/**********************************/
//模拟下拉开始
document.write('<style type="text/css">\
<!--\
.DivSelect{background:url(../../images/new_select_imgs_byhuzj.gif) 0px -27px repeat-x;width:127px;height:21px;line-height:21px;font-size:12px;text-align:left;color:#fff;border:0px;margin:0px;padding:0px;}\
.DivSelect .SelText{background:url(../../images/select_imgs.gif) right 0px no-repeat;width:100px; margin:0px 0px 0px 6px;padding:0px 25px 0px 0px;border:0px;overflow:hidden;}\
.DivOptions{position:absolute;margin:-3px auto auto 2px;width:107px;background-color:#6F7074;line-height:18px;padding:2px 0px;border:solid #fff 1px;border-top:0px;}\
.DivOptions a{float:left;width:100px;margin:0px 0px 0px 2px;color:#fff;border:solid #6F7074 1px;background:none;line-height:21px;text-decoration:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\
.DivOptions a.Sel{text-decoration:none;background-color:#5F6062;border-color:#4D4D4D;}\
.DivOptions a:hover{text-decoration:none;background-color:#5F6062;border-color:#CFD0D6;}\
-->\
</style>');
pyzy.SelectSel = function(fctI,fctP){
 var theSelobj=varSelObjs[fctI],varTheAs=pyzy.$T("a",pyzy.$("divOptions"+fctI));
 varTheAs[varSelObjs[fctI].selectedIndex].className="";
 varTheAs[fctP].className="Sel";
 theSelobj.value=theSelobj.options[fctP].value;
 pyzy.$("divSelInfo"+fctI).innerHTML=theSelobj.options[fctP].text+"";
 pyzy.$("divOptions"+fctI).style.display="none";
};
var varSelObjs=null,theShowOpsId=0;
pyzy.ShowOptions = function(fctI){ theShowOpsId=fctI;pyzy.$("divOptions"+fctI).style.display="block";}
pyzy.SelectRep = function(){
 if(varSelObjs!=null)return;
 var varSelObjsPos=null,theDivSelobj=null,theDivOpts=[],varOnChange=null;
 varSelObjs=pyzy.$T("select",document.body);
 for(var i=0;i<varSelObjs.length;i++){
  if(varSelObjs[i].getAttributeNode("pyzyRep")){
   varSelObjsPos=pyzy.getPosition(varSelObjs[i]);
   theDivSelobj=pyzy.c$(document.body,"div","divSelect"+i,"width:"+varSelObjsPos.width+"px;");/*z-index:"+(1+i)+";top:"+varSelObjsPos.top+"px;left:"+varSelObjsPos.left+"px; 167px*/
   theDivSelobj.className="DivSelect";
   varOnChange="";
   if(varSelObjs[i].getAttributeNode("onchange")){
    if(varSelObjs[i].getAttributeNode("onchange").value){
     varOnChange=varSelObjs[i].getAttributeNode("onchange").value.replace(/\'/g,"\"").replace(/\bthis\b/g,"varSelObjs["+i+"]");
    }
   }
   theDivOpts=[];
   for(var p=0;p<varSelObjs[i].options.length;p++)theDivOpts[p]="<a onclick='pyzy.SelectSel("+i+","+p+");"+varOnChange+"'"+(varSelObjs[i].selectedIndex==p?" class='Sel'":"")+" style='width:"+(varSelObjsPos.width-27)+"px;' href='javascript:void(0);'>"+varSelObjs[i].options[p].text+"</a>";
   theDivSelobj.innerHTML="\
    <div id='divSelInfo"+i+"' class='SelText' onclick='pyzy.ShowOptions("+i+");' style='width:"+(varSelObjsPos.width-27)+"px;'>"+(varSelObjs[i].selectedIndex!=-1?varSelObjs[i].options[varSelObjs[i].selectedIndex].text:" ")+"</div>\
    <div id='divOptions"+i+"' style='z-index:"+(999+i)+";display:none;width:"+(varSelObjsPos.width-(varSelObjs[i].options.length>25?5:20))+"px;"+(varSelObjs[i].options.length>10?"height:153px;overflow-y:auto;":"")+"' class='DivOptions'>"+theDivOpts.join("")+"</div>\
   ";
   varSelObjs[i].parentNode.insertBefore(theDivSelobj,varSelObjs[i].nextSibling);
   varSelObjs[i].style.display="none";
  }
 }
};

if(window.addEventListener){
	window.addEventListener("load",function(){pyzy.SelectRep();}, false);
	document.addEventListener("mouseup",function(){if(pyzy.$("divOptions"+theShowOpsId))pyzy.$("divOptions"+theShowOpsId).style.display="none";}, false);
}else{
	window.attachEvent("onload",function(){pyzy.SelectRep();});
	document.attachEvent("onmouseup",function(){if(pyzy.$("divOptions"+theShowOpsId))pyzy.$("divOptions"+theShowOpsId).style.display="none";});
}
</script>
<select name="test2" id="test2" pyzyRep>//在select里照例加入pyzyRep就可以了
    <option value="test1.option1">test1.option1</option>
    <option value="test1.option2">test1.option2</option>
    <option value="test1.option3">test1.option3</option>
    <option value="test1.option4">test1.option4</option>
</select>
<div style='text-align:center;'>
<script type='text/javascript'>
google_ad_client = 'pub-1996835592570597';goog
le_ad_slot = '6575784287';
google_ad_width = 728;
google_ad_height = 90;//这个我也还不知道干嘛用的
</script>
<script type='text/javascript' src='../../show_ads.js'></script>//这个JQUERY下面有。
</div>

总之我的总结就是这样的，还有很多需要继续学习的，任重道远啊！[/size]