自定义下拉菜单

之前同事的作品，很不错，拿开用了。

css

/*select*/
.select_wrap1{
	position:relative;
	z-index:10;
}
.select_box{
	position:absolute;
	margin:-34px 0 0 122px;
	width:127px;
	height:28px;
}

.select_wrap{
	position:absolute;
	margin:-37px 0 0 190px;
	width:200px;
	height:28px;
}
.cs_select{
	width:158px;
	height:26px;
	line-height:26px;
	font-size:12px;
	border:1px solid #e8e8ea;
	text-align:left;
	padding:0 30px 0 10px;
	overflow:hidden;
	background:url(../images/down.png) 180px center no-repeat;
	cursor:pointer;
}
.cs_list{
	position:absolute;
	width:198px;
	border:1px solid #e8e8ea;
	border-top:none;
	background:#fff;
	display:none;
	z-index:11;
	top:28px;
}
.cs_list li{
	height:30px;
	line-height:30px;
	padding-left:10px;
	cursor:pointer;
	font-size:12px;
	text-align:left;
	overflow:hidden;
}
.cs_list li:hover{
	background:#f7f7f7;
}
li.selected{
	background:#f7f7f7;
}
.show{
	display:block;
}

html

<div class="select_wrap">
            	<div id="dgtime" class="cs_select" tar="1">随时</div>
                <input type="hidden" name="" id="dgtime_input" value="" />
                <ul id="dgtime_list" class="cs_list ft_list tar1">
                	<li value="0" class="selected">随时</li>
                	<li value="1">一个月内</li>
                	<li value="2">一个月至三个月内</li>
                    <li value="3">三个月以上</li>
                </ul>
</div>
<script type="text/javascript">select_list("#dgtime");</script>

js

tar = 0;
function select_list(obj){
	var offset = $(obj).offset();
	var list = $(obj).attr("id")+'_list';
	var input = $(obj).attr("id")+'_input';
	tar++;
	var listobj = $('#'+list).addClass('tar'+tar);
	$(obj).attr('tar', tar);
	 //被点击时在div下方出现列表（当列表隐藏时，点击显示，当列表显示时，点击隐藏）
	$(obj).click(function(e){
		if($(listobj).is(".show"))
		{
			$(listobj).removeClass('show');
			$(listobj).parent().parent().removeClass('select_wrap1');
		}
		else
		{
			$('.ft_list').removeClass('show');
			//$(listobj).css({top:(offset.top+32)+'px',left:offset.left+'px'}).addClass('show');	//先调位置 防止鼠标选中
			$(listobj).addClass('show');//先调位置 防止鼠标选中
			$('.select_wrap1').removeClass('select_wrap1');
			$(listobj).parent().parent().addClass('select_wrap1');
		}
		//阻止事件冒泡
		e.stopPropagation();
	});
	 //点击页面时隐藏列表框
	$(document.body).click(function(){
		$(listobj).removeClass('show');
		$(listobj).parent().parent().removeClass('select_wrap1');
	});
	//当点击列表中li时，将li的值放入div中
	var li_len = $(listobj).find('li').length;
	$(listobj).find('li, dd').bind("click",function(){
		$(this).siblings().removeClass('selected');
		var content = $(this).addClass('selected').text();
		var val = $(this).attr('value');
		$(obj).html(content);//设置文本框的内容
		$("#"+input).val(val).change(); //设置表单提交的value
		$(listobj).removeClass('show');
		$(listobj).parent().parent().removeClass('select_wrap1');
	});
}