用层模拟下拉列表框

　　　　　　　　　　　　
　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　



　　　　　　　　　　　　

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

简单版：
<title>自制列表框</title><BR> <style><BR> .selectDiv { border: 2px solid inset buttonface;}<BR> .optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}<BR> .optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}<BR> .defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}<BR> .arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:red;width:15px;text-align:center;cursor:default;font-size:8px;}<BR> </style><BR> <SCRIPT LANGUAGE="JavaScript" DEFER><BR> //用户变量<BR> var oWhere = document.body;<BR> var OptionText = new Array();<BR> OptionText[0] = "--优秀网站--";<BR> OptionText[1] = "CSDN.net";<BR> OptionText[2] = "蓝色理想";<BR> OptionText[3] = "PcHome";<BR> OptionText[4] = "MSDN.com";<BR> //下拉菜单主体<BR> var selectDiv = document.createElement("table");<BR> var selectDivTR = selectDiv.insertRow();<BR> var defaultValueTD = selectDivTR.insertCell();<BR> var arrow = selectDivTR.insertCell();<BR> with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";<BR> with(defaultValueTD)innerText = OptionText[0],className="defaultSelect";<BR> with(arrow)innerText=6,className="arrow";<BR> oWhere.appendChild(selectDiv);<BR> //外层Div<BR> var optionDiv = document.createElement("div");<BR> //设置下拉菜单选项的坐标和宽度<BR> with(optionDiv.style) {<BR> var select = selectDiv;<BR> var xy = getSelectPosition(select);<BR> pixelLeft = xy[0];<BR> pixelTop = xy[1]+select.offsetHeight;<BR> width = selectDiv.offsetWidth;<BR> optionDiv.className = "optionDiv";<BR> }<BR> //下拉菜单内容<BR> var Options = new Array();<BR> for (var i=0;i<OptionText.length;i++) {<BR> Options[i] = optionDiv.appendChild(document.createElement("div"));<BR> }<BR> for (i=0;i<Options.length;i++) {<BR> Options[i].innerText = OptionText[i];<BR> }<BR> oWhere.appendChild(optionDiv);<BR> <BR> /*事件*/<BR> //禁止选择文本<BR> selectDiv.onselectstart = function() {return false;}<BR> optionDiv.onselectstart = function() {return false;}<BR> //下拉菜单的箭头<BR> arrow.onmousedown = function() {<BR> this.setCapture();<BR> this.style.borderStyle="inset";<BR> }<BR> arrow.onmouseup = function() {<BR> this.style.borderStyle="outset";<BR> this.releaseCapture();<BR> }<BR> arrow.onclick = function() {<BR> event.cancelBubble = true;<BR> optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible";<BR> }<BR> document.onclick = function() {<BR> optionDiv.style.visibility = "hidden";<BR> }<BR> defaultValueTD.onclick = function() {<BR> event.cancelBubble = true;<BR> optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible";<BR> }<BR> //移动Option时的动态效果<BR> for (i=0;i<Options.length;i++) {<BR> Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});<BR> Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});<BR> Options[i].attachEvent("onmouseup",selectedText);<BR> }<BR> function moveWithOptions(bg,color) {<BR> with(event.srcElement) {<BR> style.backgroundColor = bg;<BR> style.color = color;<BR> }<BR> }<BR> function selectedText() {<BR> with(event.srcElement) {<BR> defaultValueTD.innerText = innerText;<BR> }<BR> with(defaultValueTD.style)background="highlight",color="white";<BR> }<BR> /*通用函数*/<BR> //获取对象坐标<BR> function getSelectPosition(obj) {<BR> var objLeft = obj.offsetLeft;<BR> var objTop = obj.offsetTop;<BR> var objParent = obj.offsetParent;<BR> while (objParent.tagName != "BODY") {<BR> objLeft += objParent.offsetLeft;<BR> objTop += objParent.offsetTop;<BR> objParent = objParent.offsetParent;<BR> }<BR> return([objLeft,objTop]);<BR> }<BR> </SCRIPT><BR>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

高级版：
[支持图片，16x16px（需设定路径），列表框弹出滚动效果支持传值（需设定），自适应宽度，根据最宽的一个选项自动调整，样式、效果基本摹仿select tag。]
<title>自定义列表框</title><BR> <style><BR> .selectDiv { border: 2px solid inset buttonface;}<BR> .optionDiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);}<BR> .optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;}<BR> .optionDiv img { vertical-align: middle;margin-right:3px;}<BR> .defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;}<BR> .defaultSelect img { vertical-align: middle;margin-right:3px;}<BR> .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;}<BR> </style><BR> <body><BR> <span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button><BR> <SCRIPT LANGUAGE="JavaScript"><BR> //用户变量<BR> var oWhere = document.getElementById("sel");<BR> //显示文字<BR> var OptionText = new Array();<BR> OptionText[0] = "--优秀网站--";<BR> OptionText[1] = "piggydesign.yeah.net";<BR> OptionText[2] = "蓝色理想";<BR> OptionText[3] = "PcHome.net";<BR> OptionText[4] = "Sina.com.cn";<BR> //显示图片<BR> var OptionImg = new Array();<BR> OptionImg[0] = "";<BR> OptionImg[1] = "";<BR> OptionImg[2] = new Image(),OptionImg[2].src="http://www.sayee.com/cloudchen/js/images/blueidea.gif";<BR> OptionImg[3] = new Image(),OptionImg[3].src="http://www.sayee.com/cloudchen/js/images/pchome.gif";<BR> OptionImg[4] = new Image(),OptionImg[4].src="http://www.sayee.com/cloudchen/js/images/sina.gif";<BR> var OptionValue = new Array();<BR> OptionValue[0] = "";<BR> OptionValue[1] = "http://piggydesign.yeah.net";<BR> OptionValue[2] = "http://www.blueidea.com";<BR> OptionValue[3] = "http://www.pchome.net";<BR> OptionValue[4] = "http://www.sina.com.cn";<BR> //系统变量<BR> var selectedOver = false;<BR> var selectedValue = 0;<BR> //下拉菜单主体<BR> var selectDiv = document.createElement("table");<BR> var selectDivTR = selectDiv.insertRow();<BR> var defaultValueTD = selectDivTR.insertCell();<BR> var arrow = selectDivTR.insertCell();<BR> with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";<BR> with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect";<BR> with(arrow)innerText=6,className="arrow";<BR> oWhere.appendChild(selectDiv);<BR> //外层Div<BR> var optionDiv = document.createElement("div");<BR> //设置下拉菜单选项的坐标和宽度<BR> with(optionDiv.style) {<BR> var select = selectDiv;<BR> var xy = getSelectPosition(select);<BR> pixelLeft = xy[0];<BR> pixelTop = xy[1]+select.offsetHeight;<BR> optionDiv.className = "optionDiv";<BR> }<BR> //下拉菜单内容<BR> var Options = new Array();<BR> for (var i=0;i<OptionText.length;i++) {<BR> Options[i] = optionDiv.appendChild(document.createElement("div"));<BR> }<BR> for (i=0;i<Options.length;i++) {<BR> Options[i].innerHTML = showOptionImg(i)+OptionText[i];<BR> Options[i].index = i;<BR> }<BR> oWhere.appendChild(optionDiv);<BR> //列表宽度自适应<BR> var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8;<BR> selectDiv.style.width=SelectWidth;;<BR> optionDiv.style.width=SelectWidth;<BR> /*事件*/<BR> //禁止选择文本<BR> selectDiv.onselectstart = function() {return false;}<BR> optionDiv.onselectstart = function() {return false;}<BR> //下拉菜单的箭头<BR> arrow.onmousedown = function() {<BR> this.setCapture();<BR> this.style.borderStyle="inset";<BR> }<BR> arrow.onmouseup = function() {<BR> event.cancelBubble = true;<BR> this.style.borderStyle="outset";<BR> this.releaseCapture();<BR> showHide();<BR> }<BR> document.onmouseup = function() {<BR> optionDiv.style.clip="rect(auto auto 0% auto)";<BR> if(selectedOver) {<BR> with(defaultValueTD.style)background="",color="";<BR> selectedOver=false;<BR> }<BR> }<BR> defaultValueTD.onmouseup = function() {<BR> event.cancelBubble = true;<BR> showHide();<BR> }<BR> //移动Option时的动态效果<BR> for (i=0;i<Options.length;i++) {<BR> Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});<BR> Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});<BR> Options[i].attachEvent("onmouseup",selectedText);<BR> }<BR> function moveWithOptions(bg,color) {<BR> with(event.srcElement) {<BR> style.backgroundColor = bg;<BR> style.color = color;<BR> }<BR> }<BR> function selectedText() {<BR> event.cancelBubble=true;<BR> defaultValueTD.innerHTML = event.srcElement.innerHTML;<BR> with(defaultValueTD.style)background="highlight",color="white";<BR> optionDiv.style.clip="rect(auto auto 0% auto)";<BR> selectedOver = true;<BR> selectedValue = event.srcElement.index;<BR> }<BR> i = 0;<BR> /*通用函数*/<BR> //获取对象坐标<BR> function getSelectPosition(obj) {<BR> var objLeft = obj.offsetLeft;<BR> var objTop = obj.offsetTop;<BR> var objParent = obj.offsetParent;<BR> while (objParent.tagName != "BODY") {<BR> objLeft += objParent.offsetLeft;<BR> objTop += objParent.offsetTop;<BR> objParent = objParent.offsetParent;<BR> }<BR> return([objLeft,objTop]);<BR> }<BR> function showOptionImg(index) {<BR> var imgSrc = OptionImg[index].src;<BR> if (imgSrc!=undefined)<BR> return("<img src="+OptionImg[index].src+">")<BR> else<BR> return("");<BR> }<BR> function dynamicOptions() {<BR> optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;<BR> if(i<101)<BR> setTimeout("dynamicOptions()",5);<BR> else<BR> i=0;<BR> }<BR> function showHide() {<BR> with(optionDiv.style) {<BR> if (clip=="rect(auto auto 0% auto)"||clip=="")<BR> dynamicOptions();<BR> else<BR> clip="rect(auto auto 0% auto)";<BR> }<BR> }<BR> function putValue() {<BR> var url = OptionValue[selectedValue];<BR> if (url) window.open(url)<BR> }<BR> </SCRIPT><BR>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]