下拉多选

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;}

js

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();
       }
 });