<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>통계 테스트</title> <br><script src="../js/jquery.js"></script> <br><style type="text/css"> <br>.dropdiv{ <br>너비: 180px; <br>높이: 24px; <br>오버플로: 숨김; <br>플로트: 왼쪽; <br>글꼴 크기: 13px; <br>글꼴군: "微软雅黑"; <br>위치: 친척; <br>패딩: 0px 26px 0px 5px; <br>테두리: 단색 1px #cecece; <br>배경: url(../images/droparrow.png) 186px 반복 없음; <br>} <br>.dropmiandiv{ <br>여백-왼쪽: 40px; <br>너비: 213px; <br>배경: url(../images/dropdown.png) 반복-x; <br>높이: 27px; <br>} <br>.chooseItems{ <br>테두리: 단색 1px #cecece; <br>} <br>.chooseItems .chooseItem{ <br>글꼴 크기: 13px; <br>글꼴군: "微软雅黑"; <br>패딩: 5px; <br>테두리 하단: 단색 1px #cecece; <br>} <br>.chooseItems .chooseItem:last-child{ <br>border-bottom:none; <br>} <br>.chooseItems .chooseItem:hover{ <br>배경: #f2f2f2; <br>} <br></style> <br></head> <br><br><본문> <br><br><div class="dropmiandiv" Quest ="select1"> <br><input type="text" readonly="readonly" id ="select1" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> <br></div> <br><div class="chooseItems" 답변 ="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="readonly" id ="select2" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> <br></div> <br><div class="chooseItems" 답변 ="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></body> <br><br></html> <br><script type="text/javascript"> <br>$(".dropdiv").click(function(e){ <br>$(".chooseItems").slideUp(300); <br>e.stopPropagation(); <br>var Quest = $ (this).parent(); <br>varquestwidth =parseInt(quest.width())-2;<br>varquestheight=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; 🎜>var attrs = Quest.attr("quest"); <br>var selectsd = $('.chooseItems[answer=' attrs ']') <br>var selectsdHeight = selectsd.height(); 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"); parent = $("#" attrs); <br>var olddisplayMember,oldvalueMember; <br>olddisplayMember = parent.attr("displayMember") <br>oldvalueMember = parent.attr("valueMember"); (olddisplayMember !=displayMember){ <br>parent.attr("displayMember",displayMember); <br>parent.attr("valueMember",valueMember) <br>parent.val(valueMember); 변경(); <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><br><br>렌더링 <br><img src="http://files.jb51.net/file_images/article/201311/201311201548523.gif?2013102015494" alt="간단하고 세련된 js 드롭다운 선택 box_javascript 기술 사용자 정의" > </div>
