Of Stack

Div simulation selection box sample code

  • 2020-03-26 21:45:36
  • OfStack
HTML original tags can meet our needs, sometimes in order to make the interface more beautiful, we need to write out some of their own list of tags for use, this project has this requirement, simulation options box
 
<!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 simulation 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"){ 
//Displays the scroll bar
if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })}; 
thisul.fadeIn("100"); 
thisul.hover(function(){},function(){thisul.fadeOut("100");}); 
//Continuous multiple events
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=" Please select a ..." readonly="readonly"> 
<ul class="select_ul"> 
<li>2013 years </li> 
<li>2012 years </li> 
<li>2011 years </li> 
<li>2010 years </li> 
<li>2009 years </li> 
<li>2008 years </li> 
<li>2007 years </li> 
<li>2006 years </li> 
<li>2005 years </li> 
<li>2013 years 2013 years 2013 years 2013 years 2013 years </li> 
</ul> 
</div> 
<select style='margin-top:250px;'> 
<option>2013 years </option> 
<option>2012 years </option> 
<option>2011 years </option> 
<option>2010 years </option> 
<option>2009 years </option> 
<option>2008 years </option> 
</select> 
</body> 
</html>

Compare the two effects
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311030942191.gif? 201310394256 ">
Related articles: