普通的select框,选择的时候只能选单项。但是有时候项目需要,需要选择两项或者多项,最常用的设计就是模拟select下拉选择的形式,效果图如下:
我今天的方法不是用select实现的,而是模拟select的形式。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0; box-sizing:border-box}
/*单选-复选*/
label{ cursor:pointer;line-height:15px; }
.label-check{ background:url(images/check.png) no-repeat; }
.check-checked{ background:url(images/check-checked.png) no-repeat }
.label-check input{ opacity:0; filter:alpha(opacity=0);}
.title{
width: 300px;
height: 30px;
line-height:30px;
border: 1px solid #dcdcdc;
border-radius: 5px;
padding:0px 40px 0px 10px;
background:#fff;
background:url(images/icon_select_bg.png) no-repeat right;
position:absolute;
top:0px;
left:0px;
}
.input-define{ width:250px; height:22px; line-height:22px; border:none; outline:none;}
#selectbox{
width: 300px;
height: 30px;
line-height:30px;
position: relative;
margin:0px auto;
}
#selectbox ul {
width: 300px;
background: #fff;
position: absolute;
top: 40px;
left: 0px;
border: 1px solid #eaeaea;
border-radius: 5px;
display: none;
}
#selectbox ul li {
list-style: none;
height:25px;
line-height:25px;
padding:0px 10px;
}
#selectbox ul li:hover{ background:#f3f3f3; }
#data { display:none; }
</style>
</head>
<body>
<div id="selectbox">
<div class="title">
<input type="text" class="input-define" id="input-define" placeholder="请选择"/>
</div>
<ul>
<li>
<label for="checkbox-01" class="label-check">
<input type="checkbox" id="checkbox-01" name="checkbox" value="人流量热力图"/>
</label>
人流量热力图
</li>
<li>
<label for="checkbox-02" class="label-check">
<input type="checkbox" id="checkbox-02" name="checkbox" value="流量热力图"/>
</label>
流量热力图
</li>
<li>
<label for="checkbox-03" class="label-check">
<input type="checkbox" id="checkbox-03" name="checkbox" value="景点热度"/>
</label>
景点热度
</li>
<li>
<label for="checkbox-04" class="label-check">
<input type="checkbox" id="checkbox-04" name="checkbox" value="mr栅格"/>
</label>
mr栅格
</li>
<li>
<label for="checkbox-05" class="label-check">
<input type="checkbox" id="checkbox-05" name="checkbox" value="热门消费点"/>
</label>
热门消费点
</li>
<li>
<label for="checkbox-06" class="label-check">
<input type="checkbox" id="checkbox-06" name="checkbox" value="dpi栅格"/>
</label>
dpi栅格
</li>
</ul>
<span id="data"></span>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//定义一个空数组去接收value值
var arr = [];
var put1=document.getElementById("input-define");
var div1=document.getElementById("data");
//仿select的点击事件
$("#selectbox").click(function(event){
var ev = event || window.event;
//阻止默认事件及封装
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelable = true;
}
$("#selectbox ul").css("display","block");
});
$(window).click(function(){
$("#selectbox ul").css("display","none");
});
//监听checkbox的value值 改变则执行下列操作
$("input").change(function(){
if ($(this).prop("checked")) {
arr.push($(this).val()+",");
console.log(arr);
}else{
arr.shift($(this).val()+",");
}
$("#data").html(arr);
put1.value=div1.innerText;
});
//复选
$(function(){
$('.label-check').click(function(){ setupCheck(); });
});//点击label-check时执行以下事件setupCheck()
function setupCheck(){
if($('.label-check input').length) {
$('.label-check').each(function(){ $(this).removeClass('check-checked'); });//移除.label-check的选中样式
$('.label-check input:checked').each(function(){ $(this).parent('label').addClass('check-checked'); });
}//选中复选选项时给其父元素.label-check增加选中样式
}
</script>
</body>
</html>