js下拉框实现多选展示

 $.ajax({
            url:'<?= $getThirdList?>',
            dataType : 'json',
            data:{sid:sid},
            success:function(data){

                if(data.status == 1){
                    $('.third_ul').html('');
                    var html = '';
                    if(data.data.length > 0){
                        $.each(data.data, function (k, v) {
                            html += '<li><label><input lname="third_id" type="checkbox" name="third_id" value="'+v.id+'"><i></i><em>'+v.name+'</em></label></li>';
                        });
                    }
                    $('.third_ul').html(html);
                    $(".thirdDxs label").click(function(e) {
                        console.log(this);
                        var name = $(e.target).attr('lname'),
                            div_name = name + '_div',
                            txt = '',
                            vname = '';
                        // console.log($("input:checkbox[name='"+name+"']:checked"));

                        text = $("input:checkbox[name='"+name+"']:checked").nextAll('em').map(function(index,elem) {
                            txt = $(elem).html();
                            vname = txt.replace("&nbsp;├","");
                            vname = vname.replace("&nbsp;│","");
                            return vname.replace("&nbsp;└","");
                        }).get().join(',');
                        var leng = $("input:checkbox[name='"+name+"']:checked").length;
                        if(leng>4){
                            $('.'+div_name+' p').html('已选中 ' + leng + ' 项')
                        }else{
                            $('.'+div_name+' p').html(text);
                        }
                    });
                }else{
                    $.dialog.tips(data.info, 2, 'error.gif');
                }
            },
            cache:false
        });

css:

<style>
    .thirdDxs{width:700px;height:34px;margin:0;cursor:pointer;position:relative;z-index:9;}
    .thirdDxs p{width:100%;box-sizing:border-box;border:1px solid #cbcbcb;height:34px;line-height:34px;text-indent:1em;color:#666;background:url(/images/o-mis-ico-select.jpg) 98% center no-repeat #fff;text-align:left;}
    .thirdDxs ul{width:100%;box-sizing:border-box;border:1px solid #cbcbcb;border-top:0;display:none;background:#fff;max-height:200px;overflow: auto;}
    .thirdDxs ul li{line-height:28px;border-bottom:1px solid #cbcbcb;color:#666;position:relative;}
    .thirdDxs ul li:last-child{border-bottom:0;}
    .thirdDxs ul li label{display:block;padding-left:30px;}
    .thirdDxs ul li label em{font-style:normal;}
    .thirdDxs ul li input{display:none;}
    .thirdDxs ul li i{position:absolute;left:7px;top:5px;width:14px;height:14px;border:1px solid #aeaeae;border-radius:4px;background-color:#fff;}
    .thirdDxs ul li input:checked + i{background-color: #11a911;border-color: transparent;background-repeat: no-repeat;background-position: center;}
</style>

结果： 

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素 。

如果给定一个表示 DOM 元素集合的 jQuery 对象，.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素，并用匹配元素构造新的 jQuery 对象。

该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果应用选择器，则将通过检测元素是否匹配来对它们进行筛选。