<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery_select.js" type="text/javascript"></script>
<style type="text/css">
.div_select_container{
position:relative;
display:block;
background-image:url('select_bg1.gif');
background-position:top left;
background-repeat:no-repeat;
height:20px;
width:172px;
padding:0;
}
.div_select_input{
width:100%;
height:100%;
background-image:url('select_bg1.gif');
background-position:top right;
background-repeat:no-repeat;
margin-left:1px;
}
.txt_select{
width:152px;
height:16px;
border:0;
margin-top:2px;
padding:0;
line-height:16px;
background-color:#ffffff !important;
}
.div_ul_container{
position:absolute;
z-index:99999;
left:0;
top:20px;
width:173px;
overflow-x:hidden;
border:1px solid #ccc;
background-color:#ffffff;
}
.div_ul_container ul{
list-style:none;
margin:0;
padding:0;
width:100%;
}
.div_ul_container li{
margin:0;
padding:2px 5px;
height:18px;
line-height:18px;
overflow:hidden;
}
.li_option_over{
background-color:#97c6f2;
color:#ffffff;
cursor:auto;
}
</style>
<script type="text/javascript">
$(function(){
$("select[name='sel_status']").hbSelect();
});
</script>
</head>
<body>
<select name="sel_status">
<option value="">All StatusAll</option>
<option value="1">level1</option>
<option value="2">level2</option>
<option value="3">level3</option>
<option value="4">level4</option>
<option value="5">level5</option>
</select>
</body>
</html>
jquery+css+div 实现的模拟select多选.zip （4个子文件） 
jquery-1.8.2.min.js 91KB
listbox.html 2KB jquery_select.js 3KB
select_bg1.gif 1KB
人生如代码
- 粉丝: 45
- 资源: 90
- 1
- 2
前往页