码迷,mamicode.com
首页 > 其他好文 > 详细

下拉框效果的多选框

时间:2018-06-15 13:16:22      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:hold   board   100%   can   默认事件   click   radius   relative   fun   

html:

 1 <div id="selectBoard">
 2   <ul class="ul_sel" id="ul_input">
 3     <li><input type="checkbox" name="dep" id="" value="安监局" /> 安监局</li>
 4     <li><input type="checkbox" name="dep" id="" value="卫计局" /> 卫计局</li>
 5     <li><input type="checkbox" name="dep" id="" value="烟草专卖局" /> 烟草专卖局</li>
 6     <li><input type="checkbox" name="dep" id="" value="档案局" /> 档案局</li>
 7     <li><input type="checkbox" name="dep" id="" value="地税局" /> 地税局</li>
 8   </ul>
 9   <input type="text" id="span_dep" style="font-size:1.1em;border:none;color:white;width:97%;" onfocus="this.blur()" placeholder="请选择相关部门" />
10 </div>

css:

#selectBoard{
    width: 50%;
    height: 30px;
    border: 1px solid #7cf8ff;
    border-radius: 5px;
    position: relative;
    margin: 30px 50px;
    z-index:1000;
}

#selectBoard ul{
    width: 100%;
    background: white;
    position: absolute;
    top: 10px;
    left: -25px;
    border: 1px solid #7cf8ff;
    border-radius: 5px;
    display: none;
}

#selectBoard ul li{
    list-style: none;
    color:black;
}

#selectBoard ul li:hover{
    background: dodgerblue;
}

.ul_sel {
    height:160px;
    overflow-y: auto;
}
   
.ul_sel::-webkit-scrollbar {
    width: 6px;
    height: 1px;
}

.ul_sel::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #7cf8ff;
}

.ul_sel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #09abeb;
}

js:

<script type="text/javascript">
 
var arr = []; //仿select的点击事件 $("#span_dep").click(function(event){ var ev = event || window.event; //阻止默认事件及封装 if (ev.stopPropagation) { ev.stopPropagation(); }else{ ev.cancelable = true; } $("#ul_input").css("display","block"); }); //监听checkbox的value值 改变则执行下列操作 $("#ul_input input").change(function(){ if ($(this).prop("checked")) { if($("#span_dep").val()==""){ arr.push($(this).val()); }else{ arr.push($(this).val()); } }else{ arr.splice(arr.indexOf($(this).val()), 1); } $("#span_dep").val(arr); }); $("#ul_input input").click(function(event){ var ev = event || window.event; //阻止默认事件及封装 if (ev.stopPropagation) { ev.stopPropagation(); }else{ ev.cancelable = true; } $("#ul_input").css("display","block"); }); $(document).click(function(){ $("#ul_input").css("display","none"); }); </script>

 

下拉框效果的多选框

标签:hold   board   100%   can   默认事件   click   radius   relative   fun   

原文地址:https://www.cnblogs.com/f-l-y/p/9186481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!