之前同事的作品,很不错,拿开用了。
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');
});
}