jq模仿select下拉框
顾亦
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#ddlText").click(function(){
event.stopPropagation();
var p=$(this);
//alert(p.width());
var _offset = p.offset();
$(this).next(".ddlul").css("width",(p.width()+10)+"px").show("fast",
function(){//set item selected class
var lia=p.prev("input[type=hidden]").val();
if($.trim(lia)!=""){
$(".ddlul li").each(function() {
if($(this).attr("livalue")==lia){
$(this).find("a").addClass("libg");
}else{$(this).find("a").removeClass("libg");}
});
}
}
).offset({ top: (_offset.top() + p.height() -2), left: _offset.left() });
$(this).next(".ddlul li").bind("hover",function(){
$(this).addClass("libg").siblings().removeClass("libg");
})
});
$(document).click(function(event) {
var eo = $(event.target);
if($(".ddlul").is(":visible") && eo.attr("class") != "ddlul" && !eo.parent(".ddlul").length) {
$('.ddlul').hide("fast");
}
});
$(".ddlul li").live("click",function(event){
$(this).parent().prev("span").text($(this).find("a").html());
$(this).parent().prev().prev("input[type=hidden]").val($(this).attr("livalue"));
})
})
</script>
<style type="text/css">
.ddlspan{ background-color:#fff; color:#333; width:190px; height:24px; line-height:24px; padding-left:10px;
border:1px solid #666; cursor:pointer; font-size:14px; display:block;}
ul.ddlul{ margin:0; padding:0; background-color:#FFF; position:relative; border-left:1px solid #666;border-right:1px solid #666;
border-bottom:1px solid #666; list-style:none; z-index:10001; display:none;}
.ddlul li{ margin:0; padding:0; height:23px; line-height:23px; width:inherit; cursor:pointer;}
.ddlul li a{ text-decoration:none; color:#333; display:block;}
.ddlul li a:hover{ text-decoration:none; background-color:#FCF;}
.libg{ background-color:#FCF;}
</style>
</head>
<body>
<div style="width:300px; margin:0 auto; margin-top:120px;">
<div>
<input type="hidden" id="hid_ddlText" value="2" />
<span id="ddlText" class="ddlspan">选项二</span>
<ul class="ddlul" tagdom="ddlText">
<li livalue="1"><a>选项一</a></li>
<li livalue="2"><a>选项二</a></li>
<li livalue="3"><a>选项三</a></li>
<li livalue="4"><a>选项四</a></li>
<li livalue="5"><a>选项五</a></li>
</ul>
</div>
</div>
</body>
</html>
类似资料：