jquery 模仿 select
<!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=utf-8" />
<title>Selectbox模拟</title>
<style type="text/css">
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#333;}
.selectBox {position:relative; width:115px;background:#3F9; float:left}
.cats_seltor {position:relative;height:22px; width:auto;cursor:pointer; float:left}
.cats_seltor span, .cats_seltor em { float:left; display:block; }
.cats_seltor span {border:1px solid #d4d5d8; width:74px; height:20px; line-height:20px; border-right:none; padding:0 10px; color:#f60; overflow:hidden;}
.cats_seltor em {width:20px; height:22px; background:url(arrow.png) no-repeat 0 -30px;}
.cats_seltor em.down { background-position:0 0;}
.cats_lks { position:absolute;border:1px solid #d4d5d8;top:22px; left:0; background:#fff;z-index:10; min-width:96px; display:none;}
.cats_lks dd { padding:2px 6px; white-space:nowrap;text-decoration:none; overflow: visible;}
.cats_lks dd a { color:#666; display:block; padding:1px 4px;margin:0; padding:0;text-decoration:none;}
.cats_lks dd a:hover { color:#fff; background:#f60; }
</style>
</head>
<body>
<div id="selectBox" class="selectBox" style="margin-left:100px; margin-top:200px">
<div id="cats_seltor" class="cats_seltor"><span value="-1">全部</span><em></em></div>
<dl id="cats_lks" class="cats_lks">
<dd><a href="#all_svys" value="-1">全部</a></dd>
<dd><a href="#social_svys" value="1">社会</a></dd>
<dd><a href="#emotion_svys" value="2">情感</a></dd>
<dd><a href="#product_svys" value="3">产品</a></dd>
<dd><a href="#happiness_svys" value="4">开心</a></dd>
<dd><a href="#literary_svys" value="5">文体</a></dd>
<dd><a href="#finance_svys" value="6">财经</a></dd>
<dd><a href="#tech_svys" value="7">科技</a></dd>
<dd><a href="#point_svys" value="8">点子俱乐部点子俱乐部点子俱乐部点子俱乐部</a></dd>
<dd><a href="#all_svys" value="-1">全部</a></dd>
<dd><a href="#social_svys" value="1">社会</a></dd>
<dd><a href="#emotion_svys" value="2">情感</a></dd>
<dd><a href="#product_svys" value="3">产品</a></dd>
<dd><a href="#happiness_svys" value="4">开心</a></dd>
<dd><a href="#literary_svys" value="5">文体</a></dd>
<dd><a href="#finance_svys" value="6">财经</a></dd>
<dd><a href="#tech_svys" value="7">科技</a></dd>
<dd><a href="#point_svys" value="8">点子俱乐部点子俱乐部点子俱乐部点子俱乐部</a></dd>
</dl>
</div>
<div id="selectBox1" class="selectBox" style="margin-top:200px">
<div id="cats_seltor1" class="cats_seltor"><span value="-1">全部</span><em></em></div>
<dl id="cats_lks1" class="cats_lks">
<dd><a href="#all_svys" value="-1">全部</a></dd>
<dd><a href="#social_svys" value="1">社会</a></dd>
<dd><a href="#emotion_svys" value="2">情感</a></dd>
<dd><a href="#product_svys" value="3">产品</a></dd>
<dd><a href="#happiness_svys" value="4">开心</a></dd>
<dd><a href="#literary_svys" value="5">文体</a></dd>
<dd><a href="#finance_svys" value="6">财经</a></dd>
<dd><a href="#tech_svys" value="7">科技</a></dd>
<dd><a href="#point_svys" value="8">点子俱乐部点子俱乐部点子俱乐部点子俱乐部</a></dd>
<dd><a href="#all_svys" value="-1">全部</a></dd>
<dd><a href="#social_svys" value="1">社会</a></dd>
<dd><a href="#emotion_svys" value="2">情感</a></dd>
<dd><a href="#product_svys" value="3">产品</a></dd>
<dd><a href="#happiness_svys" value="4">开心</a></dd>
<dd><a href="#literary_svys" value="5">文体</a></dd>
<dd><a href="#finance_svys" value="6">财经</a></dd>
<dd><a href="#tech_svys" value="7">科技</a></dd>
<dd><a href="#point_svys" value="8">点子俱乐部点子俱乐部点子俱乐部点子俱乐部</a></dd>
</dl>
</div>
<input type="button" id="bt" value="点击" style="margin-top:200px;"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
//判断下拉li的高度大于200px出现滚动条，并设置高度为200它的
$('#cats_seltor').click(function() {
$('em', this).toggleClass('down');
$('#cats_lks').toggle();
if($("#cats_lks").height() > 200){
$("#cats_lks").css({"height":"200px","overflow-y":"scroll"});
}
});
$('#cats_lks a').click(function() {
var _text = $(this).text();
$('#cats_lks').hide();
$('#cats_seltor').find('span').text(_text).end().find('em').removeClass('down');
$('#cats_seltor').find('span').attr("value",$(this).attr("value"));
return false;
});
$("#selectBox").hover(
function(){$('#cats_lks').hide();
});
$('#bt').click(function() {
alert($('#cats_seltor').find('span').attr("value")+" "+$('#cats_seltor').find('span').text());
alert($('#cats_seltor1').find('span').attr("value")+" "+$('#cats_seltor1').find('span').text());
});
$('#cats_seltor1').click(function() {
$('em', this).toggleClass('down');
$('#cats_lks1').toggle();
if($("#cats_lks1").height() > 200){
$("#cats_lks1").css({"height":"200px","overflow-y":"scroll"});
}
});
$('#cats_lks1 a').click(function() {
var _text = $(this).text();
$('#cats_lks1').hide();
$('#cats_seltor1').find('span').text(_text).end().find('em').removeClass('down');
$('#cats_seltor1').find('span').attr("value",$(this).attr("value"));
return false;
});
$("#selectBox1").hover(
function(){$('#cats_lks').hide();
});
});
</script>
</body>
</html>