自制Jquery下拉框插件

(function ($) {
    $.fn.select3 = function (option) {
 
        $(this).each(function () {
            var _this = $(this);
            var isInit = _this.prev('div').hasClass('select3-parent');
            if(isInit){
                _this.prev('div.select3-parent ').remove();//清空之前的组件
            }
 
            var _default = {
                className: 'select3-parent', //下拉框样式可自定义
                width: '100px'
            };
 
            //是否是禁用状态
            var isDisabled = _this[0].attributes.disabled;
            if (isDisabled) {
                _default.className += ' select3-disabled';
            }
 
            //默认会根据元素设置的宽度给设置宽度，这里最好设置原始下拉框的宽度
 
            //合并自定义属性
            _default = $.extend(_default, option);
            var _data_val = _this.children('option:checked').attr('value'); //默认选中项的值
            _data_val = (_data_val ? _data_val : '-')
            var _text = _this.children('option:checked').text().trim(); //默认选中项的文本
            _text = (_text ? _text : '-');
            var hasBorder = _default.border == false ? 'no-border' : '';
 
            var _tplWrap = '<div class="'+ _default.className +' '+ hasBorder+'" style="width:'+ _default.width+'">' +
                '<div class="select3-topic" data-val="'+ _data_val +'"><span>'+ _text +
                '</span><i class="fa fa-sort-down"></i></div><ul class="select3-ul"  style="width:'+ _default.width+'">';
 
            _this.children().each(function () {
                var _this = $(this);
                var _data_val = $(this).attr('value');
                var _text = $(this).text().trim();
                var _disabled = _this.attr('disabled');
 
                if (_this.is('optgroup')) {
                    _text = _this.attr('label');
                    _data_val = 'group';
                    _tplWrap += '<li data-val="'+ _data_val +'" class="select3-group">'+ _text + '<ul>';
                    _this.children().each(function () {
                        _text = $(this).text().trim();
                        _data_val = $(this).attr('value');
                        _tplWrap += '<li data-val="'+ _data_val +'">'+ _text +'</li>';
                    });
                    _tplWrap += '</ul></li>';
                }else{
                    if (_disabled) {
                        _tplWrap += '<li data-val="'+ _data_val +'" disabled="disabled">'+ _text +'</li>';
                    } else {
                        _tplWrap += '<li data-val="'+ _data_val +'">'+ _text +'</li>';
                    }
                }
            });
 
            _tplWrap += '</ul></div>';
 
            _this.addClass('hide');//隐藏当前控件
 
            _this.before(_tplWrap)//显示插件化后的控件
 
            //绑定下拉事件
            $('.select3-topic').unbind().on('click', function () {
                var isDisabled = $(this).parent('div').hasClass('select3-disabled');
                if (isDisabled) {
                    return;
                }
 
                $('.open').not($(this).parent('div')).removeClass('open');
                $(this).addClass('open');
                $(this).children().addClass('open');
                $(this).parent('div').toggleClass('open');
            });
 
            //绑定行点击事件
            $('.select3-ul li[data-val!="group"]').unbind().on('click', function () {
                var _parent = $(this).parents('.select3-ul');//获取父标签
                var _val = $(this).attr('data-val');
                var _text = $(this).text();
                var _disabled = $(this).attr('disabled');
 
                if (_parent.siblings('div').attr('data-val') == _val || _disabled) {
                    return;
                }
 
                _parent.siblings('div').attr('data-val', _val);
                _parent.siblings('div').find('span').text(_text);
                _parent.parent('div').removeClass('open');//隐藏父标签
                _parent.parent('div').next('select').val(_val);//设置select值
 
                _parent.parent('div').next('select').change();
            });
        });
 
        //body click 去除下拉
        $('body').unbind().click(function(e){
 
            var pType = e.target.tagName;
            var className = e.target.className;
            var reg = new RegExp('open')
 
            if (pType == 'I' || pType == 'SPAN') {
                className = e.target.parentElement.className;
            }
 
            if (className == 'open-dt' || pType == 'DT' || reg.test(className)) {
                return;
            }
 
            $('.open').removeClass('open');//select3第2版
        });
 
    };
})(jQuery);

CSS 代码：

/* select3 容器最外层未点开样式 */
.select3-parent{
    font-family: Arial,"Microsoft YaHei";
    font-size: 12px;
    display: inline-block;
    border-radius: 5px;
    border:1px solid #dfdfdf;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    position: relative;
    background-color: #ffffff;
    color: #666666;
    min-width: 60px;
    vertical-align: top;
}
 
.select3-disabled{
    color:#999;
    cursor:default;
    background-color:#eee;
}
 
.no-border{
    border:none;
    bottom: -5px;
}
 
.select3-topic{
    height: 30px;
    line-height: 30px;
    /*overflow: hidden;*/
    padding-left: 10px;
    padding-right: 10px;
}
 
.select3-topic span{
    height: 30px;
    display: inline-block;
    width: 88%;
    overflow: hidden;
    text-overflow:ellipsis;
}
 
.select3-topic i{
    float:right;
    margin-top:5px;
}
 
/* select3 下拉内容 */
.select3-ul{
    display: none;
    position: absolute;
    list-style: none;
    padding:0;
    margin:0;
    border:1px solid #dfdfdf;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left:-1px;
    background-color: #ffffff;
    z-index: 999;
    overflow: auto;
    max-height: 330px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
 
/* 下拉内容样式 */
 
.select3-ul li{
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow:ellipsis;
}
 
.select3-ul li[disabled]{
    /*background-color: #eeeeee;*/
    color: #dfdfdf;
}
 
.select3-ul li:hover{
    background-color: #111e30;
    color: #ffffff;
}
 
.select3-ul li[disabled]:hover{
    background-color: #ffffff;
    color:#dfdfdf;
    cursor: default;
}
 
/* 分组标题样式 select3-group */
.select3-ul li.select3-group{
    padding-left: 0;
    padding-right: 0;
    text-indent: 10px;
    color: black;
}
 
.select3-group{
    cursor: default;
    font-weight: bold;
}
 
.select3-group ul{
    font-weight: normal;
    color: #666666;
    list-style: none;
    padding:0;
    margin:0;
}
 
.select3-group li{
    padding-left: 10px;
    padding-right: 10px;
}
 
li.select3-group:hover{
    background-color: #ffffff;
    color: black;
}
 
.select3-group li:hover{
    cursor: pointer;
}
 
/* select3 容器最外层点开后样式 */
.select3-parent.open{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    border-bottom: none;
    border-bottom: 1px solid #fff;
}
 
.select3-parent.open.no-border{
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
}
 
/* 点开后，下拉菜单内容的样式 */
.select3-parent.open .select3-ul{
    display: block;
}
 
.select3-parent.open .select3-topic{
    padding:0px;
    height: 29px;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid #dfdfdf;
}

禁用效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAAAqCAIAAAD0/pM9AAACYElEQVR4nO3dvY6yQBiG4T3/M7CnsKKn5xDomYEhgjAalWRiNsavQFf9RN0RkJ+9r4oo5g3J8wyoCXwd68znc2NM7VvAX/ZV+yqFAWpRGMAChQEsUBjAQtPClGWplIqiKARGSEqZJMkv026MaVQYrbWUcrFY5Hm+AkaoKIo0TaWUWuvnad9sNnEcv1+YsiyrMX0fMtBUtfSXZfko7caYOI4Ph8P7hUmSJE3Tvo8UaEeapkmSPEp7lmW73e7Y5DuMlLIoir4PE2iH1loI8SjtcRx/f383KkwYhn0fI9CmMAyfpL3aoDDACYUBLFAYwAKFASwMpjCB57j+f1t1fHc2e/L2n56F7o2gML47e8E2aFOdhe4NujC+201mpjoL3eu5MIHn3C2oVbB8dzZzvKBuv2uXXV6a6ix80jDPMHeJqb/+DzznrWBNdRa6N8zC3IWo3ZV4qrPQvfEU5uc13z2nqZVVf0Kz0L1hFKb6weg+WLd5Ou1wCdZbpjoLH9F7YXy3ilTtSnzePO0UBMHqJ1jnD1qY6ix8Ts+FufzAWhss33W8wHdvr+ivV+JLul7/8TfOWRiW3s8wZ7frb/1339NffXVXLkEQrALP+d2X5RHNwsAMpjDAGFAYwAKFASxQGMAChQEsUBjAQreF4TZLmJLOb7PEjfwwJVmWKaUepb2FG/mVZSmE6PswgRZoraMo2m63j9JujJFSNirM8XjM81wIkaYpd1jGSGmtl8ullDLLsudpX6/XUsqmj7swxiil6p4jAIyAEEIp9eTccm2/3/NAJcAChQEsUBjAAoUBLFAYwMI/iPaz/g+iTJUAAAAASUVORK5CYII=" alt="" />

常态：