您好,歡迎來到web微博客 設為首頁加入收藏
web微博客最好的資源共享平臺!
精品cms模板和教程都在這里!
web微博客清新上線!

div+css+js模擬的select的下拉框效果
2015-03-23 09:17:50   來源:web微博客   評論:0 點擊:

分享到:
<!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

<!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" />
<script language="javascript" type="text/javascript">
function show_select(input,btn,option,value){
inputobj=document.getElementById(input);

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>

上一篇:閉合浮動(清除浮動)的幾種方法
下一篇:select美化自定義下拉框樣式

湖南快乐十分走势图表