jquery用div+span做的多选框,怎么获得选中的多个span的值?

上图是前端页面.
前端代码如下:

我写的取值代码如下:
$(".dia_menu_lst span").click(function (e) {
    $(this).siblings().each(function(){
       $(this).removeClass("selected"); //去除同一个div下span兄弟节点的选中状态
    });
    $(this).toggleClass("selected"); // 点击某个span时添加或移除选中状态
    weight =$('#weigdiv .selected').attr('data'); //选择含有选中状态selected的元素（有选中状态状态的span）
    neatness =$('#neatdiv .selected').attr('data');
    var color =$('#colordiv .selected').attr('data');
    alert(ctgId +" "+weight+" "+neatness+" "+color);
}); 
    问题:因为每次点击的时候会去除兄弟的选中状态,所以实现不了多选.neatness和weight需要单选,color需要多选.求教各位大神怎么取得多选的color的值,我每次都只能取到一个.

最后遍历选中的那几条数据，赋值给一个变量就行了,随便写的，不一定正确
    var color="";
    var i=0;
    $('#colordiv .selected').each(function(){
        if(i!=0){
                color+=","+$(this.attr("data"));
        }else{
                color+=$(this.attr("data"));
        }

        i++;
    })

select multiple 多选

这种的原理就是多选的select，加上select标签就可以了