自定义的一个简单时尚js下拉选择框

165 阅读 0 评论 109 点赞

我是靠谱客的博主拼搏毛巾，最近开发中收集的这篇文章主要介绍自定义的一个简单时尚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> 
<script src="../js/jquery.js"></script> 
<style type="text/css"> 
.dropdiv{ 
width: 180px; 
height: 24px; 
overflow: hidden; 
float: left; 
font-size: 13px; 
font-family: "微软雅黑"; 
position: relative; 
padding: 0px 26px 0px 5px; 
border: solid 1px #cecece; 
background: url(../images/droparrow.png) 186px no-repeat; 
} 
.dropmiandiv{ 
margin-left: 40px; 
width: 213px; 
background: url(../images/dropdown.png) repeat-x; 
height: 27px; 
} 
.chooseItems{ 
border: solid 1px #cecece; 
} 
.chooseItems .chooseItem{ 
font-size: 13px; 
font-family: "微软雅黑"; 
padding: 5px; 
border-bottom: solid 1px #cecece; 
} 
.chooseItems .chooseItem:last-child{ 
border-bottom:none; 
} 
.chooseItems .chooseItem:hover{ 
background: #f2f2f2; 
} 
</style> 
</head> 

<body> 

<div class="dropmiandiv" quest ="select1"> 
<input type="text" readonly="readonly" id ="select1" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> 
</div> 
<div class="chooseItems" answer ="select1" style="display:none; position:absolute;"> 
<div class="chooseItem" displayMember="0" valueMember ="独立注册译员">独立注册译员</div> 
<div class="chooseItem" displayMember="1" valueMember ="供应商译员">供应商译员</div> 
<div class="chooseItem" displayMember="2" valueMember ="供应商">供应商</div> 
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> 
</div> 

<div class="dropmiandiv" quest ="select2" style="position:absolute;top:200px;"> 
<input type="text" readonly="readonly" id ="select2" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> 
</div> 
<div class="chooseItems" answer ="select2" style="display:none; position:absolute;"> 
<div class="chooseItem" displayMember="0" valueMember ="独立注册译员">独立注册译员</div> 
<div class="chooseItem" displayMember="1" valueMember ="供应商译员">供应商译员</div> 
<div class="chooseItem" displayMember="2" valueMember ="供应商">供应商</div> 
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> 
</div> 

</body> 

</html> 
<script type="text/javascript"> 
$(".dropdiv").click(function(e){ 
$(".chooseItems").slideUp(300); 
e.stopPropagation(); 
var quest = $(this).parent(); 
var questwidth = parseInt(quest.width())-2; 
var questheight = quest.height(); 
var left = quest.position().left+parseInt(quest.css("margin-left"))+parseInt(quest.css("padding-left")); 
var top = parseInt(quest.position().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).slideUp(300); 
}else{ 
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).slideDown(300); 
} 
}); 
$(".chooseItem").click(function(e){ 
e.stopPropagation(); 
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.val(valueMember); 
parent.change(); 
} 
$(this).parent().slideUp(300); 
}); 
$(document).click(function(e){ 
var target = $(e.target); 
if(target.closest(".chooseItems").length == 0){ 
$(".chooseItems").slideUp(300); 
} 
}); 
</script> 