自定义Jquery 下拉框

(function ($){
    'use strict';
    var g_id = 0;
    var g_open_id = [];
    $.fn.select3 = function () {
        var _id = g_id++;
        var _isShow = false;
        var _this = $(this);
        var _val = _this.children('option:selected').text();
        var _w = _this.css('width');
        var tpl = '<dl class="select2_wrap" style="'+_w+'"><dt class="open-dt" id="select2_title'+ _id +'" data-val=""><span>'+_val+'</span><i class="fa fa-sort-down"></i></dt>';
        _this.children('option').each(function (){
            tpl += '<dd style="display:none" data-val="'+ $(this).val() +'">' + $(this).text() + '</dd>';
        });
        tpl += '</dl>';
        _this.hide().before(tpl);

        _this.bind('change', function () {
            $('#select2_title').text($(this).val()).attr('data-val', $(this).val());
        });

        $('#select2_title'+_id).attr('data-val', $(this).val());

        $('#select2_title'+_id).siblings().click(function () {
            var text = $(this).text();
            var _val = $(this).attr('data-val');
            _this.val(_val);
            $('#select2_title'+_id).attr('data-val',$(this).attr('data-val')).children('span').text(text);
            $(this).parent('dl').children('dd').slideUp(200, function() {
                $(this).siblings('dt').css({'borderBottom':'1px solid #ccc', 'border-bottom-right-radius':'5px', 'border-bottom-left-radius':'5px'});
            });

            _this.change();
        });

        $('#select2_title'+_id).click(function() {
            $('dd').slideUp(100, function () {
                $('dt[role-page]').attr('style', '');
            });
            var _id = $(this).attr('id');
            g_open_id.push(_id);
            $.each(g_open_id, function(i) {
                if (g_open_id[i] != _id) {
                    $('#'+g_open_id[i]).siblings('dd').slideUp(200, function () {
                        $(this).siblings('dt').css({'borderBottom': '1px solid #ccc', 'border-bottom-right-radius': '5px', 'border-bottom-left-radius': '5px'});
                    });
                    delete g_open_id[i];
                }
            });

            _isShow  = $(this).siblings('dd').css('display') == 'none' ? false : true;
            if (!_isShow) {
                $(this).css({'borderBottom':'none', 'border-bottom-right-radius':'0', 'border-bottom-left-radius':'0'});
                $(this).siblings('dd').slideDown(300);
            }else{
                $(this).siblings('dd').slideUp(200, function () {
                    $(this).siblings('dt').css({'borderBottom': '1px solid #ccc', 'border-bottom-right-radius': '5px', 'border-bottom-left-radius': '5px'});
                });
            }
        });

        $(window).click(function(e){
            var pType = e.target.tagName;
            var className = e.target.className;

            if (pType == 'I' || pType == 'SPAN') {
                className = e.target.parentElement.className;
            }

            if (className == 'open-dt') {
                return;
            }

            $('dd').slideUp(100, function () {
                $('.select2_wrap').children('dt').css({'borderBottom': '1px solid #ccc', 'border-bottom-right-radius': '5px', 'border-bottom-left-radius': '5px'});
                $('dt[role-page]').attr('style', '');
            });


        });

    };
})(jQuery);

样式：

/* select3 style */
.select3-wrap{
    display: inline-flex;
    height: 30px;
    width: 100%;
}

.select2_wrap{
    height: 30px;
    line-height: 30px;
    margin:0;
    padding:0;
    text-align:left;
    display: inline-block;
    font-size: 12px;
    z-index: 9999;
}

.select2_wrap dt{
    border:1px solid #ccc;
    border-radius: 5px;
    padding-left:10px;
    font-weight: normal;
    cursor:pointer;
    overflow: hidden;
}

.select2_wrap dt>i{
    float:right;
    margin-right: 10px;
    margin-top:3px;
}

.select2_wrap dd{
    padding-left:10px;
    background-color: #FFFFFF;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.select2_wrap dd:last-child{
    border-bottom:1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 35px;
}

.select2_wrap dt, .select2_wrap dd{
    height:30px;
    line-height: 30px;
}

.select2_wrap dd:hover{
    background-color:#414C59;
    color:white;
    cursor:pointer;
}

.hide {
    display: none;
}

效果：