html의 원본 태그는 우리의 요구를 충족시킬 수 있습니다. 때로는 인터페이스를 더 아름답게 만들기 위해 이 프로젝트에 사용할 일련의 태그를 작성해야 합니다. 시뮬레이션 옵션 상자 코드 복사 코드는 다음과 같습니다. ul 시뮬레이션 선택< /title> ; <br><br>.select_box {너비:150px; 여백:10px;패딩:0;} <br>.submit_box {너비:180px; ;padding:0; 글꼴 크기:12px; text-align:center;} <br>ul,li {list-style-type:none; margin:0} <br>.select_box 입력 포인터; 표시:블록; 너비:100%; 높이:25px; 단색: 패딩-오른쪽:10px } ul {폭:180px; 위치:절대:0; 상단:25px; 배경:#fff; 숨김:#ebebeb; <br>.select_box ul li {display:block;height:30px;overflow:hidden;line-height:30px;padding-left:5px;width:100%;cursor:pointer;} <br>.hover {배경: #ccc;} <br><br> <br>$(document).ready(function(){ <br>$(" .select_box 입력") .click(function(){ <br><br>var thisinput=$(this); <br>var thisul=$(this).parent().find("ul"); <br>if(thisul.css("display")=="none"){ <br>//스크롤 막대 표시<br>if(thisul.height()>200){thisul.css({height:" 200" "px" ,"overflow-y":"scroll" })}; <br>thisul.fadeIn("100"); <br>thisul.hover(function(){},function(){thisul. fadeOut("100" );}); <br>//연속되는 여러 이벤트 <br>thisul.find("li").click( <br>function(){thisinput.val($(this). text());thisul .fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover ");}); <br>} <br>else{ <br>thisul.fadeOut("fast"); <br>} <br>}) <br><br>}); <br>< /script> <br> </head> <br><body> <br><div class="select_box"><input id="myselect" type="text" value="선택하세요. .." readonly=" readonly"> <br><ul class="select_ul"> <br><li>2013</li> <br><li>2012</li> <br> <br><li>2010</li> <br><li>2008</li> <br> li>2007</li> <br><li>2005</li> <br>20132013201320132013</li> > ; <br></div> <br><select style='margin-top:250px;'> <br><option>2013</option> ; <br><옵션>2011</옵션> <br><옵션>2010</옵션> <br><2009</옵션> <br></select> <br></body> <br></html> <br><br> <br>두 효과 비교<br><br> </div>