<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>margin-left: 40px; <br>幅: 213px; <br>背景: url(../images/dropdown.png)repeat-x; <br>高さ: 27px; <br>} <br>.chooseItems{ <br>border: 実線 1px #cecece; <br>} <br>.chooseItems .chooseItem{ <br>font-size: 13px; <br>フォントファミリー: "微软雅黑"; <br>パディング: 5px; <br>border-bottom: 実線 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"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> <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> <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> <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>var Questwidth = parseInt(quest.width())-2; <br>var クエスト高さ = Quest.height(); parseInt(quest.css("margin-left")) parseInt(quest.css("padding-left")); <br>var top = parseInt(quest.position().top) parseInt(questheight) <br>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>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 olddisplayMember =parent.attr("displayMember"); (olddisplayMember !=displayMember){ <br>parent.attr("displayMember",displayMember); <br>parent.val(valueMember);変更(); <br>} <br>$(this).parent().slideUp(300); <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ドロップダウン選択ボックスをカスタマイズする_javascriptスキル" >
