兼容ie8的多选下拉选择框

说下写这个东东的原因：最近要写一个兼容ie8的项目，我一出来工作就是数据驱动的框架了。所以对不支持vue的ie8.真的是脑壳疼。
最后考察了一番，决定使用 layui这个官网宣城兼容人类正在使用的全部浏览器（IE6/7除外）的Ui
刚开始用着，好像也是挺香的，相对于其他兼容ie8的ui,各方面都好很多。
慢慢的，蛋疼的时候来了，就是layui的多选下拉对ie8不支持。
接着，就开始百度各种多选下拉插件（还是懒啊，啥都想用现成的),耗费大量精力测试修改，都不尽人意，好多都是标题单，宣称支持ie8,结果gg
最后，实在是被迫出马。自己写了一个，就是现在这个东东
废话就说这么多，上代码如下
代码里的注释都比较全的了。有啥不理解的可以留言找我讨论，
如果帮到你，给我点个赞

cb-Checkbox.js

// 调用函数
function cbInit(cbValue,cbOptions){
    var cbValue = cbValue
    var cbOptions = cbOptions
    cbInputInit(cbValue)
    cbOptionsInit(cbOptions,cbValue)
}

// 输入框初始化
function cbInputInit(cbValue){
    var inputtext = ''
    $(cbValue).each(function(index,item){
        if(index < cbValue.length-1){
            inputtext += item.name+' , '
        }else{
            inputtext += item.name 
        }
    })
    $('.cbInput-box').val(inputtext)
}
// 选择项显示隐藏
$(".cbInput-box").on("click", function(){
    if($('.cbOption-box').css("opacity")==0){
        $('.cbOption-box').css("opacity",1)
        $('.cbOption-box').css("z-index",999)
    }else{
        $('.cbOption-box').css("opacity",0)
        $('.cbOption-box').css("z-index",-1)
    }
})

// 光标移开输入框和选择框隐藏
var ifinInputbox = false
var ifinOptionbox = false
$(".cbInput-box").mouseover(function(){
       ifinInputbox = true
}).mouseout(function(){
     ifinInputbox = false
});
$(".cbOption-box").mouseover(function(){
    ifinOptionbox = true
}).mouseout(function(){
    ifinOptionbox = false
});
    // 下面两个blur事件在谷歌浏览器不支持,ie8支持，不影响使用。（有更好的解决方案希望留言讨论）
$(".cbInput-box").on("blur", function(){
   if(!ifinOptionbox){
    $('.cbOption-box').css("opacity",0)
    $('.cbOption-box').css("z-index",-1)
   }
})
$(".cbOption-box").on("blur", function(){
   if(!ifinInputbox){
    $('.cbOption-box').css("opacity",0)
    $('.cbOption-box').css("z-index",-1)
   }
})

// 选择项初始化
function cbOptionsInit(cbOptions,cbValue){
    $(".cbOption-box").empty();
    for(var i = 0;i"+cbOptions[i].name+"
")
        }else{
            $('.cbOption-box').append("
"+cbOptions[i].name+"
")
        }
    }

    // 选择事件
    $(".cbOption").on("click", function(){
        if($(this).attr("class").indexOf('active')== -1){
            $(this).addClass("active");
            cbChange(true,$(this).attr('dataid'))
        }else{
            $(this).removeClass("active");
            cbChange(false,$(this).attr('dataid')) 
        }
        
    });
    // 选择项变化时输入框的变化
    function cbChange(ifadd,id){
        if(ifadd){
            $(cbOptions).each(function(index2,item2){
                if(id == item2.id){
                    cbValue.push(item2) 
                    cbInputInit(cbValue)
                    return
                }
            })
        }else{
            $(cbValue).each(function(index,item){
                if(id == item.id){ 
                    cbValue.splice(index,1)
                    cbInputInit(cbValue)
                    return
                }
            })
        }
    }
}

cb-Checkbox.css

*{
    margin: 0;
    padding: 0;
}
.cb-Checkbox{
    display: inline-block;
    width:450px;
    position: relative;
    cursor: pointer;
}
.cbInput-box{
    padding-left: 10px;
    padding-right: 30px;
    width: 100%;
    height: 38px;
    line-height: 38px;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    border-radius: 2px;
    border-color: #e6e6e6;
}
.cbOption-box{
    z-index: -1;
    opacity: 0;
    filter:Alpha(opacity=0);
    position:absolute;
    text-align: left;
    border: 1px solid #999999 ;
    width: 100%;  
    background-color: #ffffff;
    /* padding-right: 30px; */

    border: 1px solid #d2d2d2;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    box-sizing: border-box;
}
.cbOption{
    cursor:pointer;
    line-height: 36px;
    padding-left: 10px;
}
.active{
    background-color: #5FB878;
    color: #fff;
}

使用例子

效果图

• 目前只适用于一个页面一个多选的情况。需要一个页面多个的，自己改下类名变成可匹配的就行了