下拉框效果的多选框

Posted 2020-11-18 f-l-y

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>