用DIV+js模拟的一个下拉菜单(select)
不知道为什么控制select的css样式这么少，以至于我们想做一个漂亮的下拉菜单却要大费周折，
这个下拉菜单是我给一公司做网站时用div+js模拟出来的，看起来还过的去，
废话少说，先看效果，如图
如果你和我一样的懒大可把他下载下来直接改改用就可以了。
需要注意的是里面的js代码是公用的(show_select函数)
也就是说你可以在一个页面上放多个下拉菜单同时调用这个show_select函数。
用时需要给show_select函数传4个参数
onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')"
第一个参数是下拉菜单显示数据的id
第二个参数是下拉菜单的按钮部分的id，也就是那个红色方块了。
每三个参数是下拉菜单的下拉列表的id
第四个参数是form表单里input隐藏域的id
模拟的下拉菜单是和form表单里的隐藏域是成对出现的，因为要转值嘛，
下面把代码贴出来，
| 以下为引用的内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> btnobj=document.getElementById(btn); optionobj=document.getElementById(option); valueobj=document.getElementById(value); optionobj.style.display=optionobj.style.display==""?"none":""; optionobj.onblur=function () { optionobj.style.display="none"; } for (var i=0;i<optionobj.childNodes.length;i++){ optionobj.focus(); optionobj.childNodes[i].onmouseover=function (){ this.className="qty_items_over"; } optionobj.childNodes[i].onmouseout=function (){ this.className="qty_items_out"; } optionobj.childNodes[i].onclick=function () { //alert(this.innerHTML) inputobj.innerHTML=this.innerHTML; valueobj.value=this.innerHTML; optionobj.blur(); optionobj.style.display="none"; if (input=="pro_color"){ loadpic(this.id,""); } } } } </script> <style type="text/css"> body{ font-size:12px; font:12px Arial, Helvetica, sans-serif; } .pro_select{ width:250px; height:35px;} #pro_qty{ float:left; height:20px; width:75px; padding-left:2px; border-top:1px solid #959595; border-bottom:1px solid #959595; border-left:1px solid #959595; line-height:20PX; } #pro_qty_but{ float:left; width:25px; cursor:pointer;} #qty_items{ clear:left; width:99px; border-right:1px solid #959595; border-bottom:1px solid #959595;] border-left:1px solid #959595; position:absolute; z-index:80; } .qty_items_out { background-color:#FFFFFF; padding-left:2px; cursor:pointer; line-height:18PX; } .qty_items_over{ background-color:#CCCCCC; padding-left:2px; cursor:pointer; line-height:18PX; } .clear{ clear:left;} </style> <title>WWW.PHPERZ.COM</title> </head> <body > <div class="pro_select"> <div id="pro_qty">Select Qty</div> <div id="pro_qty_but" onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')"> <img src="img/select_btn.png" width="24" height="22" /></div> <div class="clear"></div> <div id="qty_items" style="display:none"> <div class='qty_items_out'>Select-1</div> <div class='qty_items_out'>Select-2</div> <div class='qty_items_out'>Select-3</div> <div class='qty_items_out'>Select-4</div> <div class='qty_items_out'>Select-5</div> </div> </div> <form id="form1" name="form1" method="post" action="?"> <input name="qty" type="hidden" id="qty" value="1" /> </form> </body> </html> |