使用div+css模拟select功能与效果

这是一段简洁实用的js模拟select功能与效果实例,不足之处希望大家指正.另外, 我没有上传美化的按扭小图标,但不影响查看,如有需要,大家可以修改一下图片地址再运行代码.

当我在使用浮动层的时候,发现最上层的div能遮住了其它层,但select一直遮不掉;

同时更气人的是,select的按钮不能被修改或使用图片代替,这使我们无法对其进行美化.

对此我自己用javascript+div+css模拟实现了一个可以替代select的封装类,可以任意添加,希望对大家有用.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>colee做的模拟select效果</title>
<style type="text/css">

</style>
<script type="text/javascript">
function CoLeeSelect(thisObj){
 var thisinput = thisObj.getElementsByTagName("input");
 var thisul = thisObj.getElementsByTagName("ul");
 var thisli = thisul[0].getElementsByTagName("li");
 if(thisObj.id != "CoLeeSelect"){
  thisObj.id = "CoLeeSelect";
  thisObj.focus();
  thisul[0].style.display = "";
  for(var i=0;i<thisli.length;i++){
   thisli[i].onmouseover = function(){
    for(var j=0;j<thisli.length;j++){
     thisli[j].className = "";
     }
    this.className = "on";
    }
   thisli[i].onclick = function(){
    thisinput[0].value = this.innerHTML;
    }
   }
  }else{
   ObjBlur();
  }
  thisObj.onblur = ObjBlur;
  function ObjBlur(){
   thisObj.id =  "";
   thisul[0].style.display = "none";
   thisObj.blur();
   }
 }
</script>
</head>
<body style=" width:500px; margin:100px auto;">
<div onclick="CoLeeSelect(this)" style="position:relative;float:left; cursor:pointer; width:120px; height:20px; background:#eee;" tabIndex=0>
  <input style="width:65px; height:18px; margin-right:-15px; cursor:pointer;" type="text" value="22222222" /><img src="u_t1.gif" />
 <ul class="Option" style="position:absolute; left: 0px; top: 20px;  border:1px #666 solid; display:none">
    <li>111111111111</li>
    <li class="on">222222222222</li>
    <li>333333333333</li>
 </ul>
</div>
<div onclick="CoLeeSelect(this)" style="position:relative;float:left;" tabIndex=0>
  <input style="width:65px; height:18px; margin-right:-15px;" type="text" value="22222222" />
  <img src="u_t1.gif" />
 <ul class="Option" style="position:absolute; left: 0px; top: 20px;  border:1px #666 solid; display:none">
    <li>111111111111</li>
    <li class="on">222222222222</li>
    <li>333333333333</li>
 </ul>
</div>
</body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

One Response to “使用div+css模拟select功能与效果”

CoLee★＂ Says:
七月 3rd, 2009 at 2:12 下午
花了我不少时间,希望对大家有用.

春去花还在-CoLee★＂

使用div+css模拟select功能与效果

One Response to “使用div+css模拟select功能与效果”

Leave a Reply

Search

Categories

Monthly Archives

Links

合作链接

Tags

Meta