select控件单选多选美化下拉

.select-box {
    position: relative;
    overflow-y: hidden;
    padding: 0 10px;
    border: 1px solid #e4e4e4;
    line-height: 22px;
    cursor: default;
    background-color: #fff;
}
.select-box .iconfont {
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 24px;
    background-color: #fff;
}
.select-box .word {
    display: block;
    margin-right: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    width: 100%;
    line-height: 22px;
    height: 22px;
}
.select-box .word:focus {
    border: none;
}
.select-options {
    position: absolute;
    z-index: 100;
    max-height: 380px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #e4e4e4;
}
.select-options li {
    position: relative;
    overflow: hidden;
}
.select-options li label {
    display: block;
    padding: 5px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.select-options input {
    position: absolute;
    left: -100px;
    /* left: -2px; */
}
.select-options li:hover {
    color: #fff;
    background-color: #3879d9;
}
.select-options .iconfont {
    margin-right: 5px;
    border: 1px solid #e4e4e4;
    color: transparent;
}
.select-options .active .iconfont {
    color: #e03641;
}

/**
 * 多选下拉框
 * @param  {[object]} options [实例参数]
 * options.callback 选择项后的回调，参数为所有选中组成的数组和当前select元素
 * options.name select控件的name属性，没有时调用options参数给定的name值，还没有时默认hqjf-1到9999的随机数
 * options.width 下拉菜单的宽度，默认是select控件的父容器宽度
 * options.holdSkin 定制更多选择控件样式
 * options.optionSkin 定制更多下拉菜单样式
 * options.filter 是否可用输入过滤下拉项
 * ====以下参数多选时用到===
 * options.word 没有选择项目时的显示文字
 * options.active 选中项的激活class名，默认active
 * options.split 选择多项时项目之间的分隔符
 */
$.fn.selectDown = function(options) {
    this.each(function(){
        new $.fn.selectDown.prototype.init($(this),options||{});
    })
    return this;
}
// 收集所有实例
$.fn.selectDown.collect = [];
$.fn.selectDown.prototype = {
    constructor: $.fn.selectDown,
    init: function($ele,opt) {
        var def = {
            word: '请选择',
            callback: $.noop,
            active: 'active',
            split: '/',
            name: 'hqjf-' + Math.floor(Math.random () * 9999) + 1,
            holdSkin: '',
            filter: false,
            optionSkin: ''
        }
        var that = this;
        that.$select = $ele.hide();
        that.isMul = !!that.$select.filter("[multiple]").length; // 是否多选
        $ele[0].selectDown = that;
        opt = opt || {};
        that.options = $.extend({},def,opt);
        that.options.name = $ele.attr("name") || that.options.name;

        that.$options = $('<ul class="select-options '+ that.options.optionSkin +'"></ul>').appendTo("body").hide();

        that.buildSelect();
        that.buildOption();

        that.event();
        $.fn.selectDown.collect.push(that);
    },
    relocate: function() {
        var $menu = this.$menu;
        var posi = $menu.offset();
        this.$options.css({
            left: posi.left,
            width: this.options.width || $menu.outerWidth() - 2,
            top: posi.top + $menu.outerHeight() - 1
        })
    },
    buildSelect: function() {
        var that = this;
        var options = that.options;
        var $select = that.$select;
        var htm = "";
        htm = '<div class="select-box '+ options.holdSkin +'">'
            +(
                options.filter ?
                '<input class="word" placeholder="'+ options.word +'" value='+ that.getSelectWord() +'></input>' :
                '<span class="word">'+ that.getSelectWord() +'</span>'
            )
            +    '<i class="iconfont">&#xe99b;</i>'
            +'</div>';
        that.$menu = $(htm).insertAfter($select);
        // setTimeout(function(){that.relocate();},0);

    },
    getSelectWord: function() {
        var that = this;
        var word = "";
        var $select = that.$select;
        $select.children(":selected").each(function(){
            word += $(this).text() + "/";
        });
        word = word.slice(0,word.length-1);
        return that.options.filter ? word : word || that.options.word;
    },
    buildOption: function() {
        var that = this;
        var options = that.options;
        var htm = '';
        var $select = that.$select;
        $select.children().each(function(i,t){
            var $t = $(t);
            htm += '<li data-value="'+ $t.attr("value") +'" data-options="'+ $t.text() +'" class="'+ (t.selected ? options.active : '') +'">'
                +        '<label>'
                +            '<input type="'+ (that.isMul ? 'checkbox' : 'radio') +'" name="'+ options.name +'" value="'+ $t.val() +'" '+ (t.selected ? 'checked' : '') +'>' + (that.isMul ? '<i class="iconfont">&#xe730;</i>' : '') + $t.text()
                +        '</label>'
                +    '</li>'
        });
        that.$options.html(htm);
    },
    reload: function() {
        this.buildOption();
    },
    event: function() {
        var that = this;
        var $options = that.$options;
        var $menu = that.$menu;
        var options = that.options;
        var $select = that.$select;
        // 选择了其中一项
        $options.on("change","input",function(){
            var val = this.value;
            var checked = this.checked;
            // 单选时 点击选项后直接隐藏下拉
            if (!that.isMul) {
                $options.hide();
            }
            $select.children("[value='"+ val +"']")[0].selected = checked;
            that.buildOption();
            $('.word',$menu)[options.filter ? 'val' : 'text'](that.getSelectWord());
            options.callback($select.val(),$select);
        });
        // 点击展开下拉
        $menu.on("click",function(){
            $($.fn.selectDown.collect).each(function(i,t){
                t.$options.hide();
            });
            $options.show();
            that.relocate();
            return false;
        }).on("input focus","input.word",function(e){
            // 输入过滤下拉
            if (e.type === 'input') {
                var val = $.trim(this.value);
                if (val) {
                    $(":checkbox,:radio",$options).each(function(){
                        var skey = $(this).closest("li").attr("data-options");
                        $(this).closest("li")[~skey.search(new RegExp(val,'i')) ? 'show' : 'hide']();
                    })
                } else {
                    $("li",$options).show();
                }
            } else if (e.type === 'focusin') {
                // 多选的时候，如输入框聚焦清除已选的显示，准备好下一次的过滤
                if (that.isMul && options.filter) {
                    $(this).val("");
                }
            }
        });
        // 原select控件绑定事件
        $select.on("change",function(){
            $('.word',$menu)[options.filter ? 'val' : 'text'](that.getSelectWord());
            that.buildOption();
        });
    }
}
$.fn.selectDown.prototype.init.prototype = $.fn.selectDown.prototype;
$(window).on("click",function(e){
    var target = e.target;
    $($.fn.selectDown.collect).each(function(i,t){
        if (!$.contains(t.$options[0],target)) {
            t.$options.hide();
        }
    });
});