快捷導(dǎo)航

js 自定義個性下拉選擇框示例

更新時間：2013年08月20日 15:44:48 作者：

下拉選擇框想必大家并不陌生，一邊情況下都是使用默認的，為了打破傳統(tǒng)，下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下

 
<!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>statistics test</title> 
<link type="text/css" rel="stylesheet" href="../css/statistics.css"/> 
<script src="../js/jquery.js"></script> 
<style type="text/css"> 
.dropdiv{ 
width: 177px; 
height: 16px; 
overflow: hidden; 
float: left; 
font-size: 13px; 
font-family: "微軟雅黑"; 
position: relative; 
padding: 5px; 
} 
.drpdown{ 
width: 214px; 
height: 24px; 
font-size: 13px; 
font-family:"微軟雅黑"; 
position: relative; 
border:none; 
padding-top:4px; 
background:url(../images/dropdown.png) repeat-x; 
} 
.drpdown:active{ 
width: 214px; 
height: 24px; 
font-size: 13px; 
font-family:"微軟雅黑"; 
position: relative; 
border:none; 
padding-top:4px; 
background:url(../images/dropdown.png) repeat-x; 
} 
.droparrow{ 
width:27px; 
height:27px; 
background:url(../images/droparrow.png) no-repeat; 
float:right; 
} 
.droparrow:hover{ 
width:25px; 
height:25px; 
background:url(../images/droparrow.png) no-repeat; 
float:right; 
border:#F00 1px solid; 
} 
.dropmiandiv{ 
margin-left:40px; 
width:214px; 
border: 2px solid #aaaaaa; 
background:url(../images/dropdown.png) repeat-x; 
height: 26px; 
} 
.chooseItems{ 
border:#666 2px solid; 
} 
.chooseItems .chooseItem{ 
font-size: 13px; 
font-family: "微軟雅黑"; 
padding: 5px; 
} 
.chooseItems .chooseItem:hover{ 
background:#09F; 
} 
</style> 
</head> 

<body> 

<div class="dropmiandiv" quest ="select1"> 
<div id ="select1" displayMember="-1" valueMember ="請選擇" class="dropdiv">請選擇</div> 
<div class="droparrow"></div> 
</div> 
<div class="chooseItems" answer ="select1" style="display:none; position:absolute;"> 
<div class="chooseItem" displayMember="0" valueMember ="獨立注冊譯員">獨立注冊譯員</div> 
<div class="chooseItem" displayMember="1" valueMember ="供應(yīng)商譯員">供應(yīng)商譯員</div> 
<div class="chooseItem" displayMember="2" valueMember ="供應(yīng)商">供應(yīng)商</div> 
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> 
</div> 

<div class="dropmiandiv" quest ="select2" style="position:absolute;top:200px;"> 
<div id ="select2" displayMember="-1" valueMember ="請選擇" class="dropdiv">請選擇</div> 
<div class="droparrow"></div> 
</div> 
<div class="chooseItems" answer ="select2" style="display:none; position:absolute;"> 
<div class="chooseItem" displayMember="0" valueMember ="獨立注冊譯員">獨立注冊譯員</div> 
<div class="chooseItem" displayMember="1" valueMember ="供應(yīng)商譯員">供應(yīng)商譯員</div> 
<div class="chooseItem" displayMember="2" valueMember ="供應(yīng)商">供應(yīng)商</div> 
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> 
</div> 

</body> 

</html> 
<script type="text/javascript"> 
$(".droparrow").click(function(e){ 
var quest = $(this).parent(); 
var questwidth = parseInt(quest.width()); 
var questheight = quest.height(); 
var left = quest.offset().left; 
var top = parseInt(quest.offset().top)+parseInt(questheight)+4; 
var attrs = quest.attr("quest"); 
var selectsd = $('.chooseItems[answer='+attrs+']'); 
var selectsdHeight = selectsd.height(); 
if((top+selectsdHeight)>$(window).height()){ 
top = top - selectsdHeight - questheight-7; 
} 
if($(selectsd).is(":visible")){ 
$(selectsd).hide(); 
}else{ 
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show(); 
} 
}); 
$(".dropdiv").click(function(e){ 
var quest = $(this).parent(); 
var questwidth = parseInt(quest.width()); 
var questheight = quest.height(); 
var left = quest.offset().left; 
var top = parseInt(quest.offset().top)+parseInt(questheight)+4; 
var attrs = quest.attr("quest"); 
var selectsd = $('.chooseItems[answer='+attrs+']'); 
var selectsdHeight = selectsd.height(); 
if((top+selectsdHeight)>$(window).height()){ 
top = top - selectsdHeight - questheight-7; 
} 
if($(selectsd).is(":visible")){ 
$(selectsd).hide(); 
}else{ 
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show(); 
} 
}); 
$(".chooseItem").click(function(e){ 
var divhtml = $(this); 
var displayMember,valueMember; 
displayMember = divhtml.attr("displayMember"); 
valueMember = divhtml.attr("valueMember"); 
var attrs =$(this).parent().attr("answer"); 
var parent = $("#"+attrs); 
var olddisplayMember,oldvalueMember; 
olddisplayMember = parent.attr("displayMember"); 
oldvalueMember = parent.attr("valueMember"); 
if(olddisplayMember !=displayMember){ 
parent.attr("displayMember",displayMember); 
parent.attr("valueMember",valueMember); 
parent.html(valueMember); 
parent.change(); 
} 

$(this).parent().hide(); 
}); 
$(".dropdiv").change(function(e){ 
alert($(this).attr("valueMember")); 
}); 
$(".dropmiandiv").mouseleave(function(e){ 
var quest = $(this).attr("quest"); 
$('.chooseItems[answer='+quest+']').hide(); 
}); 
$(".chooseItems").mouseenter(function(e){ 
$(this).show(); 
}); 
$(".chooseItems").mouseleave(function(e){ 
$(this).hide(); 
}); 
</script> 