js - 下拉多选

emmm

当时有需要，随手写的, 怎么方便怎么写， 代码很丑。哈哈哈哈哈哈。

/**
 * el 元素
 * list 展示的数据
 * callback 回调函数
 */
function xxyBt(el, list, callback){
    
    var elReact = el.getBoundingClientRect()
    var divinnerarr = []
    var innerStyle = 'position: absolute;background: #fff;display: inline-block;padding: 0px 0;border-radius: 5px;box-shadow: 5px 6px 18px rgba(0,0,0,.5);left:'+elReact.left+'px;top:'+elReact.top+'px;'
    var op = []
    var XXYTBOPEVENT = "XXYTBOPEVENT"
    ;(function(){
     var div, divTag = "XXY-TB-STYLE", ifDiv = false
        if(window[divTag]){
            div = window[divTag]
            ifDiv = true
        }else{
            div = document.createElement('style')
            div.id = divTag
        }
        div.innerHTML = '#XXY-TB .clone{display: inline-block;width: 31px;height: 30px; overflow: hidden;position: absolute;top: -10px;right: -7px;}'+
        '#XXY-TB .close.black:after, #XXY-TB .close.black:before {height: 8px;margin-top: -4px;border-radius: 100%;content: "";position: absolute;    width: 100%;left: 0;background: #f44336;}'+
        '#XXY-TB .close:before {transform: rotate(45deg);}'+
        '#XXY-TB .close:after {transform: rotate(-45deg);}'+
        '#XXY-TB .op:hover{background: #00f6ff47}'
        ifDiv || document.head.appendChild(div)
    })()
    list.forEach(function(item, index, arr){
        divinnerarr.push('<div class="op" onclick="'+XXYTBOPEVENT+'(\''+item.key+'\', '+ index +')" style="padding: 5px 40px;border-bottom: 1px solid #f6f3f3">'+item.inner+'</div>')
    })
    var divinner = divinnerarr.join('') 

    var div, divTag = "XXY-TB", ifDiv = false
    var successStyle = 'background: #d6050596;color: #fff;    text-align: center;    padding: 5px;'
    if(window[divTag]){
        div = window[divTag]
        ifDiv = true
    }else{
        div = document.createElement('div')
        div.id = divTag
    }
    div.innerHTML = [
            '<div class="inner" style="'+innerStyle+'">',
            divinner + '<div id="'+ divTag+'-OFF-BUTTON' +'" style="'+successStyle+'">',
                // '<span class="close fat black"></span>',
                '完成选择',
            '</div>',
            '</div>'
    ].join('')
    ifDiv || document.body.appendChild(div)
    div.style.cssText = "position: fixed;top: 0;left: 0;z-index: 99999999;overflow: hidden;width: 100%;height: 100%;font-size: 14px;"
    
    window[divTag+'-OFF-BUTTON'].onclick = function(){
        document.body.removeChild(div)
        callback(getOpObj(op, list))
    }

    var opArrNum = []
    list.forEach(function(e, index){
        opArrNum[index] = 0
    })

    window[XXYTBOPEVENT] = function(key, index){
        opArrNum[index] += 1
        opArrNum.forEach(function(num, index){
            op[index] = Boolean(num % 2 != 0)
        })
        setStyle(op)
    }
    function setStyle(opArrNum){
        opArrNum.forEach(function(e, index){
            console.log(e)
            div.querySelectorAll('.op')[index].style.background = e ? "red" : '#fff'
        })
    }

    function getOpObj(op, list){
        var re = []
        list.forEach(function(e, index){
            op[index] && re.push(e)
        })
        return re
    }
}

Example：

var list = [
    {inner: "aaa", key: 'emmmm1'},
    {inner: "bbb", key: '2'},
    {inner: "cc", key: '3'},
    {inner: "ccss", key: '43'},
    {inner: "cssc", key: '23'},
]

var cb = function(keyArr){
    console.log(keyArr)

}
bt(
    document.querySelectorAll('.mu-td')[12],
    list,
        cb
)

--END--