下拉多选

来源：互联网发布：mac连wifi需要wpa2密码编辑：程序博客网时间：2024/06/03 12:58

这里写图片描述
html

<div class="wrap-multiselect">    <a id="select_" class="select-item  layui-form-select">请选择</a></div><ul class="dropdown-menu tardiv" hidden="">    <li>苹果</li>    <li>橘子</li>    <li>香蕉</li>    <li>芒果</li></ul>

css

.wrap-multiselect:after{content: '';width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;position: absolute;right: 5px;top: 50%;margin-top: -3px;cursor: pointer;border-width: 6px;border-top-color: #c2c2c2;border-top-style: solid;transition: all .3s;-webkit-transition: all .3s;}.wrap-multiselect{width: 190px;position: relative;margin-right: 10px;}.select-item{display: block;width: 100%;padding: 10px 13px 10px 6px;border: 1px solid #e6e6e6;background-color: #fff;border-radius: 2px;}.dropdown-menu{background-color: #fff;border: 1px solid #ccc;border: 1px solid rgba(0,0,0,0.15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);box-shadow: 0 6px 12px rgba(0,0,0,0.175);width: 300px;margin: 2px 0 0;padding: 7px 0;}.dropdown-menu li{height: 30px;line-height:30px ;padding-left: 10px;}.dropdown-menu li:hover{cursor: pointer;background: #eee;}.dropdown-menu li.active{background: url(../images/selected.png) no-repeat 95% center;background-size: 20px;}

var str="";$("#select_").click(function(){    $(".dropdown-menu").show();})$(".dropdown-menu li").click(function(){    $(this).toggleClass("active");    if($(this).hasClass("active")){         str+=$(this).text()+" ,";         var $endStr=str.substring(0,str.length-1)    }    else{        var $str1=$(this).text()+" ,";        str=str.replace($str1,'');        var $endStr=str.substring(0,str.length-1)    }    $("#select_").html($endStr);    if($("#select_").html()==''){        $("#select_").html('请选择');    }})})$(document).mouseup(function (e) {      var _con = $('.dropdown-menu');   // 设置目标区域       if (!_con.is(e.target) && _con.has(e.target).length === 0) {           $(".dropdown-menu").hide();       } });

阅读全文

0 0