<div class="codetitle"> <span><a style="CURSOR: pointer" data="84855" class="copybut" id="copybut84855" onclick="doCopy('code84855')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code84855"> <br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>statistics test</title> <br><script src="../js/jquery.js"></script> <br><style type="text/css"> <BR>.dropdiv{ <BR>width: 180px; <BR>height: 24px; <BR>overflow: hidden; <BR>float: left; <BR>font-size: 13px; <BR>font-family: "微软雅黑"; <BR>position: relative; <BR>padding: 0px 26px 0px 5px; <BR>border: solid 1px #cecece; <BR>background: url(../images/droparrow.png) 186px no-repeat; <BR>} <BR>.dropmiandiv{ <BR>margin-left: 40px; <BR>width: 213px; <BR>background: url(../images/dropdown.png) repeat-x; <BR>height: 27px; <BR>} <BR>.chooseItems{ <BR>border: solid 1px #cecece; <BR>} <BR>.chooseItems .chooseItem{ <BR>font-size: 13px; <BR>font-family: "微软雅黑"; <BR>padding: 5px; <BR>border-bottom: solid 1px #cecece; <BR>} <BR>.chooseItems .chooseItem:last-child{ <BR>border-bottom:none; <BR>} <BR>.chooseItems .chooseItem:hover{ <BR>background: #f2f2f2; <BR>} <BR></style> <br> <br><br> <br><br><div class="dropmiandiv" quest="select1"> <br><input type="text" readonly id="select1" displaymember="-1" valuemember="请选择" class="dropdiv" value="请选择"> <br> </div> <br><div class="chooseItems" answer="select1" style="display:none; position:absolute;"> <br><div class="chooseItem" displaymember="0" valuemember="独立注册译员">独立注册译员</div> <br><div class="chooseItem" displaymember="1" valuemember="供应商译员">供应商译员</div> <br><div class="chooseItem" displaymember="2" valuemember="供应商">供应商</div> <br><div class="chooseItem" displaymember="3" valuemember="代理商">代理商</div> <br> </div> <br><br><div class="dropmiandiv" quest="select2" style="position:absolute;top:200px;"> <br><input type="text" readonly id="select2" displaymember="-1" valuemember="请选择" class="dropdiv" value="请选择"> <br> </div> <br><div class="chooseItems" answer="select2" style="display:none; position:absolute;"> <br><div class="chooseItem" displaymember="0" valuemember="独立注册译员">独立注册译员</div> <br><div class="chooseItem" displaymember="1" valuemember="供应商译员">供应商译员</div> <br><div class="chooseItem" displaymember="2" valuemember="供应商">供应商</div> <br><div class="chooseItem" displaymember="3" valuemember="代理商">代理商</div> <br> </div> <br><br> <br><br> <br><script type="text/javascript"> <BR>$(".dropdiv").click(function(e){ <BR>$(".chooseItems").slideUp(300); <BR>e.stopPropagation(); <BR>var quest = $(this).parent(); <BR>var questwidth = parseInt(quest.width())-2; <BR>var questheight = quest.height(); <BR>var left = quest.position().left+parseInt(quest.css("margin-left"))+parseInt(quest.css("padding-left")); <BR>var top = parseInt(quest.position().top)+parseInt(questheight)+4; <BR>var attrs = quest.attr("quest"); <BR>var selectsd = $('.chooseItems[answer='+attrs+']'); <BR>var selectsdHeight = selectsd.height(); <BR>if((top+selectsdHeight)>$(window).height()){ <BR>top = top - selectsdHeight - questheight-7; <BR>} <BR>if($(selectsd).is(":visible")){ <BR>$(selectsd).slideUp(300); <BR>}else{ <BR>$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).slideDown(300); <BR>} <BR>}); <BR>$(".chooseItem").click(function(e){ <BR>e.stopPropagation(); <BR>var divhtml = $(this); <BR>var displayMember,valueMember; <BR>displayMember = divhtml.attr("displayMember"); <BR>valueMember = divhtml.attr("valueMember"); <BR>var attrs =$(this).parent().attr("answer"); <BR>var parent = $("#"+attrs); <BR>var olddisplayMember,oldvalueMember; <BR>olddisplayMember = parent.attr("displayMember"); <BR>oldvalueMember = parent.attr("valueMember"); <BR>if(olddisplayMember !=displayMember){ <BR>parent.attr("displayMember",displayMember); <BR>parent.attr("valueMember",valueMember); <BR>parent.val(valueMember); <BR>parent.change(); <BR>} <BR>$(this).parent().slideUp(300); <BR>}); <BR>$(document).click(function(e){ <BR>var target = $(e.target); <BR>if(target.closest(".chooseItems").length == 0){ <BR>$(".chooseItems").slideUp(300); <BR>} <BR>}); <BR></script> <br> </div> <br>效果图 <br><img src="http://files.jb51.net/file_images/article/201311/201311201548523.gif?2013102015494" alt="自定义的一个简单时尚js下拉选择框_javascript技巧" >
