兼容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.length;i++){
        var ifactive = false
        $(cbValue).each(function(index,item){
            if(cbOptions[i].id == item.id){
                ifactive = true
            }
        })
        if(ifactive){
            $('.cbOption-box').append("<p id='999' class='cbOption active' dataid="+ cbOptions[i].id +">"+cbOptions[i].name+"</p>")
        }else{
            $('.cbOption-box').append("<p class='cbOption' dataid="+ cbOptions[i].id +">"+cbOptions[i].name+"</p>")
        }
    }

    // 選擇事件
    $(".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;
}

使用例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./cb-Checkbox.css">
</head>
<body>
      <div class="cb-Checkbox">
            <input class="cbInput-box" readonly="readonly"></input>
            <div class="cbOption-box">
            </div>
      </div>

      <!-- 注意ie8只支持v1.9以下的jquery -->
      <script src="./jquery.min.js"></script>  
      <script src="./cb-Checkbox.js"></script>
      <script>
           var Value = [{id:1,name:"第一選項"},{id:2,name:"第二選項"},{id:3,name:"第三選項"}]
            var Options = [{id:1,name:"第一選項"},{id:2,name:"第二選項"},{id:3,name:"第三選項"},{id:4,name:"第四選項"},{id:5,name:"第五選項"}] 
            cbInit(Value,Options)
      </script>
</body>
</html>

效果圖

• 目前只適用於一個頁面一個多選的情況。需要一個頁面多個的，自己改下類名變成可匹配的就行了