ul+input 模拟 select

1、event.stopPropagation(); //终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

实现：

<!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="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style type="text/css">

.select_box {width:230px; position:relative; margin:10px;padding:0; font-size:12px;}
.select_box ul,li {list-style-type:none; padding:0; margin:0}
.select_box input {
cursor:pointer;
display:block; line-height:38px; width:100%; height:38px; overflow:hidden;border:1px solid #ccc;
padding-right:20px; padding-left:10px;
background:url(http://www.codefans.net/jscss/demoimg/201112/select_input_bg.gif) no-repeat 220px center;
/*background:url(icon-down-1.png) no-repeat 220px center; */

}
.select_box ul {
width:260px;
position:absolute;
left:0; top:38px;
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;}
.select_box ul li.hover { background:#ccc;}

</style>
<script type="text/javascript">
$(document).ready(function(){
$(".select_box").click(function(event){
var thisul=$(this).find("ul");
event.stopPropagation(); //终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
if(thisul.height()>200){
thisul.css({height:"200"+"px","overflow-y":"scroll" })
};
$(this).find("ul").toggle(); //toggle() 方法切换元素的可见状态。
//如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
});

$(document).click(function(event){
if($(".select_box").is(":visible")){
$(this).find('ul').hide();
}

});
/*赋值给文本框*/
$(".select_box ul li")
.click(function(){
var thisinput = $(this).parent().parent().find("input");
thisinput.val($(this).text());
})
.hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
});
</script>
</head>

posted @ 2014-07-26 15:26 zhr_jx Views(394) Comments(0) 收藏举报

刷新页面返回顶部

zhr_jx

ul+input 模拟 select

公告