用层模拟下拉列表框

大家都知道select的优先权比较高，css不宜控制，而且还能遮挡层的正常显示！那么我们就来模拟一个！这样样式就可以随心所欲了（若您看不到效果，请刷新）。

简单版：
<title>自制列表框</title> <style> .selectdiv { border: 2px solid inset buttonface;} .optiondiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;} .optiondiv div { font-size:11px;font-family:tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;} .defaultselect { font-size:11px;font-family:tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;} .arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:red;width:15px;text-align:center;cursor:default;font-size:8px;} </style> <script language="javascript" defer> //用户变量 var owhere = document.body; var optiontext = new array(); optiontext[0] = "--优秀网站--"; optiontext[1] = "csdn.net"; optiontext[2] = "蓝色理想"; optiontext[3] = "pchome"; optiontext[4] = "msdn.com"; //下拉菜单主体 var selectdiv = document.createelement("table"); var selectdivtr = selectdiv.insertrow(); var defaultvaluetd = selectdivtr.insertcell(); var arrow = selectdivtr.insertcell(); with(selectdiv)cellspacing=0,cellpadding=0,border=0,classname="selectdiv"; with(defaultvaluetd)innertext = optiontext[0],classname="defaultselect"; with(arrow)innertext=6,classname="arrow"; owhere.appendchild(selectdiv); //外层div var optiondiv = document.createelement("div"); //设置下拉菜单选项的坐标和宽度 with(optiondiv.style) { var select = selectdiv; var xy = getselectposition(select); pixelleft = xy[0]; pixeltop = xy[1]+select.offsetheight; width = selectdiv.offsetwidth; optiondiv.classname = "optiondiv"; } //下拉菜单内容 var options = new array(); for (var i=0;i<optiontext.length;i++) { options[i] = optiondiv.appendchild(document.createelement("div")); } for (i=0;i<options.length;i++) { options[i].innertext = optiontext[i]; } owhere.appendchild(optiondiv); /*事件*/ //禁止选择文本 selectdiv.onselectstart = function() {return false;} optiondiv.onselectstart = function() {return false;} //下拉菜单的箭头 arrow.onmousedown = function() { this.setcapture(); this.style.borderstyle="inset"; } arrow.onmouseup = function() { this.style.borderstyle="outset"; this.releasecapture(); } arrow.onclick = function() { event.cancelbubble = true; optiondiv.style.visibility = optiondiv.style.visibility=="visible"?"hidden":"visible"; } document.onclick = function() { optiondiv.style.visibility = "hidden"; } defaultvaluetd.onclick = function() { event.cancelbubble = true; optiondiv.style.visibility = optiondiv.style.visibility=="visible"?"hidden":"visible"; } //移动option时的动态效果 for (i=0;i<options.length;i++) { options[i].attachevent("onmouseover",function(){movewithoptions("highlight","white")}); options[i].attachevent("onmouseout",function(){movewithoptions("","")}); options[i].attachevent("onmouseup",selectedtext); } function movewithoptions(bg,color) { with(event.srcelement) { style.backgroundcolor = bg; style.color = color; } } function selectedtext() { with(event.srcelement) { defaultvaluetd.innertext = innertext; } with(defaultvaluetd.style)background="highlight",color="white"; } /*通用函数*/ //获取对象坐标 function getselectposition(obj) { var objleft = obj.offsetleft; var objtop = obj.offsettop; var objparent = obj.offsetparent; while (objparent.tagname != "body") { objleft += objparent.offsetleft; objtop += objparent.offsettop; objparent = objparent.offsetparent; } return([objleft,objtop]); } </script>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

高级版：
[支持图片，16x16px（需设定路径），列表框弹出滚动效果支持传值（需设定），自适应宽度，根据最宽的一个选项自动调整，样式、效果基本摹仿select tag。]
<title>自定义列表框</title> <style> .selectdiv { border: 2px solid inset buttonface;} .optiondiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);} .optiondiv div { font-size:11px;font-family:tahoma;padding-left:8px;line-height:160%;background-color:white;} .optiondiv img { vertical-align: middle;margin-right:3px;} .defaultselect { font-size:11px;font-family:tahoma;padding-left:6px;border:1px solid white;cursor:default;} .defaultselect img { vertical-align: middle;margin-right:3px;} .arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;} </style> <body> <span id="sel"></span><button style="font-family:arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putvalue()">go</button> <script language="javascript"> //用户变量 var owhere = document.getelementbyid("sel"); //显示文字 var optiontext = new array(); optiontext[0] = "--优秀网站--"; optiontext[1] = "piggydesign.yeah.net"; optiontext[2] = "蓝色理想"; optiontext[3] = "pchome.net"; optiontext[4] = "sina.com.cn"; //显示图片 var optionimg = new array(); optionimg[0] = ""; optionimg[1] = ""; optionimg[2] = new image(),optionimg[2].src="http://www.sayee.com/cloudchen/js/images/blueidea.gif"; optionimg[3] = new image(),optionimg[3].src="http://www.sayee.com/cloudchen/js/images/pchome.gif"; optionimg[4] = new image(),optionimg[4].src="http://www.sayee.com/cloudchen/js/images/sina.gif"; var optionvalue = new array(); optionvalue[0] = ""; optionvalue[1] = "http://piggydesign.yeah.net"; optionvalue[2] = "http://www.blueidea.com"; optionvalue[3] = "http://www.pchome.net"; optionvalue[4] = "http://www.sina.com.cn"; //系统变量 var selectedover = false; var selectedvalue = 0; //下拉菜单主体 var selectdiv = document.createelement("table"); var selectdivtr = selectdiv.insertrow(); var defaultvaluetd = selectdivtr.insertcell(); var arrow = selectdivtr.insertcell(); with(selectdiv)cellspacing=0,cellpadding=0,border=0,classname="selectdiv"; with(defaultvaluetd)innerhtml = showoptionimg(1)+optiontext[0],classname="defaultselect"; with(arrow)innertext=6,classname="arrow"; owhere.appendchild(selectdiv); //外层div var optiondiv = document.createelement("div"); //设置下拉菜单选项的坐标和宽度 with(optiondiv.style) { var select = selectdiv; var xy = getselectposition(select); pixelleft = xy[0]; pixeltop = xy[1]+select.offsetheight; optiondiv.classname = "optiondiv"; } //下拉菜单内容 var options = new array(); for (var i=0;i<optiontext.length;i++) { options[i] = optiondiv.appendchild(document.createelement("div")); } for (i=0;i<options.length;i++) { options[i].innerhtml = showoptionimg(i)+optiontext[i]; options[i].index = i; } owhere.appendchild(optiondiv); //列表宽度自适应 var selectwidth = options[0].offsetwidth+arrow.offsetwidth+8; selectdiv.style.width=selectwidth;; optiondiv.style.width=selectwidth; /*事件*/ //禁止选择文本 selectdiv.onselectstart = function() {return false;} optiondiv.onselectstart = function() {return false;} //下拉菜单的箭头 arrow.onmousedown = function() { this.setcapture(); this.style.borderstyle="inset"; } arrow.onmouseup = function() { event.cancelbubble = true; this.style.borderstyle="outset"; this.releasecapture(); showhide(); } document.onmouseup = function() { optiondiv.style.clip="rect(auto auto 0% auto)"; if(selectedover) { with(defaultvaluetd.style)background="",color=""; selectedover=false; } } defaultvaluetd.onmouseup = function() { event.cancelbubble = true; showhide(); } //移动option时的动态效果 for (i=0;i<options.length;i++) { options[i].attachevent("onmouseover",function(){movewithoptions("highlight","white")}); options[i].attachevent("onmouseout",function(){movewithoptions("","")}); options[i].attachevent("onmouseup",selectedtext); } function movewithoptions(bg,color) { with(event.srcelement) { style.backgroundcolor = bg; style.color = color; } } function selectedtext() { event.cancelbubble=true; defaultvaluetd.innerhtml = event.srcelement.innerhtml; with(defaultvaluetd.style)background="highlight",color="white"; optiondiv.style.clip="rect(auto auto 0% auto)"; selectedover = true; selectedvalue = event.srcelement.index; } i = 0; /*通用函数*/ //获取对象坐标 function getselectposition(obj) { var objleft = obj.offsetleft; var objtop = obj.offsettop; var objparent = obj.offsetparent; while (objparent.tagname != "body") { objleft += objparent.offsetleft; objtop += objparent.offsettop; objparent = objparent.offsetparent; } return([objleft,objtop]); } function showoptionimg(index) { var imgsrc = optionimg[index].src; if (imgsrc!=undefined) return("<img src="+optionimg[index].src+">") else return(""); } function dynamicoptions() { optiondiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20; if(i<101) settimeout("dynamicoptions()",5); else i=0; } function showhide() { with(optiondiv.style) { if (clip=="rect(auto auto 0% auto)"||clip=="") dynamicoptions(); else clip="rect(auto auto 0% auto)"; } } function putvalue() { var url = optionvalue[selectedvalue]; if (url) window.open(url) } </script>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

（）

返回顶部

下一篇：JS 中对象equals方法的实现 >>