快捷導(dǎo)航

div模擬選擇框示例代碼

更新時(shí)間：2013年11月03日 09:42:02 作者：

這次項(xiàng)目就有這個(gè)要求了，模擬選項(xiàng)框，我選擇使用div+css+jquery來實(shí)現(xiàn)，總的來說還不錯(cuò)，感興趣的朋友可以參考下

html原有標(biāo)簽可以滿足我們需求，有時(shí)為了使界面更加美觀，就需要自己寫出來一些列標(biāo)簽供使用，這次項(xiàng)目就有這個(gè)要求了，模擬選項(xiàng)框

 
<!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=gb2312" /> 
<title>ul模擬select</title> 
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> 
<style type="text/css"> 

.select_box {width:150px; position:relative; margin:10px;padding:0; font-size:12px;} 
.submit_box {width:180px; position:relative; margin:10px;padding:0; font-size:12px; text-align:center;} 
ul,li {list-style-type:none; padding:0; margin:0} 
.select_box input {cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;border:1px solid #ccc; padding-right:20px; padding-left:10px; } 
.select_box ul {width:180px; position:absolute; left:0; top:25px; border:1px solid #ccc; background:#fff; overflow: hidden;display:none; background:#ebebeb; z-index:99999;} 
.select_box ul li {display:block;height:30px;overflow:hidden;line-height:30px;padding-left:5px;width:100%;cursor:pointer;} 
.hover {background:#ccc;} 

</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".select_box input").click(function(){ 

var thisinput=$(this); 
var thisul=$(this).parent().find("ul"); 
if(thisul.css("display")=="none"){ 
//顯示出來滾動(dòng)條 
if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })}; 
thisul.fadeIn("100"); 
thisul.hover(function(){},function(){thisul.fadeOut("100");}); 
//連續(xù)多個(gè)事件 
thisul.find("li").click( 
function(){thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}); 
} 
else{ 
thisul.fadeOut("fast"); 
} 
}) 

}); 
</script> 
</head> 
<body> 
<div class="select_box"><input id="myselect" type="text" value="請選擇..." readonly="readonly"> 
<ul class="select_ul"> 
<li>2013年</li> 
<li>2012年</li> 
<li>2011年</li> 
<li>2010年</li> 
<li>2009年</li> 
<li>2008年</li> 
<li>2007年</li> 
<li>2006年</li> 
<li>2005年</li> 
<li>2013年2013年2013年2013年2013年</li> 
</ul> 
</div> 
<select style='margin-top:250px;'> 
<option>2013年</option> 
<option>2012年</option> 
<option>2011年</option> 
<option>2010年</option> 
<option>2009年</option> 
<option>2008年</option> 
</select> 
</body> 
</html> 