普通的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>
