div模拟选择框示例代码_Javascript教程-查字典教程网
div模拟选择框示例代码
div模拟选择框示例代码
发布时间:2017-01-14 来源:查字典编辑
摘要:html原有标签可以满足我们需求,有时为了使界面更加美观,就需要自己写出来一些列标签供使用,这次项目就有这个要求了,模拟选项框复制代码代码如...

html原有标签可以满足我们需求,有时为了使界面更加美观,就需要自己写出来一些列标签供使用,这次项目就有这个要求了,模拟选项框

复制代码 代码如下:

<!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"){

//显示出来滚动条

if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })};

thisul.fadeIn("100");

thisul.hover(function(){},function(){thisul.fadeOut("100");});

//连续多个事件

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><input id="myselect" type="text" value="请选择..." readonly="readonly">

<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>

<option>2013年</option>

<option>2012年</option>

<option>2011年</option>

<option>2010年</option>

<option>2009年</option>

<option>2008年</option>

</select>

</body>

</html>

两个效果进行比较

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类