自写Jquery插件 Combobox

原创文章，转载请注明出处，https://www.cnblogs.com/GaoAnLee/p/9092421.html 

上效果

html

<span id='combobox'>城市</span>

css

@CHARSET "UTF-8";
body,html{
  height:100%;
}
ul, li {
    list-style: none;
}
#combobox {
    font-size: 13px;
    border: 1px solid #AAAAAA;
    -webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    -ms-border-radius: 5px 5px;
    -o-border-radius: 5px 5px;
    border-radius: 5px 5px;
    display: inline-block;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
}

jquery.combobox.js

/*
 * combobox
 * authoer:GaoAnLee
 * <span id='combobox'></span>
 */
;
(function($, window, document, undefined) {
    function _init(combobox, b) {
        var _this = combobox.element;
        var options = $.data(_this, 'combobox').options;
        var obj = document.getElementById(options.id);
        var r = getposition(obj);
        if (b) {
            _this.css('width', options.width).css('height', options.height).css('line-height', options.height + 'px');
            _this.parent().css('position', 'relative');
            _this.after('<i class=\"fa fa-caret-down dropdown-icon\"></i>');
            $('.dropdown-icon').css('left', r['y'] + options.width).css('top', r['x'] + 5).css('position', 'absolute');
            warpList(options, r);
        }
        actions(options);
    }

    function warpList(options, r) {
        var len = options.list.length;
        var buffer = '';
        buffer += '<ul id=\"dropdown-list\">';
        for (var i = 0; i < len; i++) {
            buffer += '<li>' + options.list[i] + '</li>';
        }
        buffer += '</ul>';
        $('.dropdown-icon').after(buffer);
        $('#dropdown-list').css('display', 'none').css('font-size', '13px').css('left', r['y'] +2).css('top', r['x'] + options.height-1).css('position', 'absolute').css('border', '1px solid #AAAAAA');
        $('#dropdown-list').children('li').css('cursor', 'pointer').css('color', '#ffffff').css('background-color', '#42485b').css('width', options.width+1).css('height', options.height).css('line-height', options.height + 'px').css('display', 'block').css('text-align', 'left').css('padding', '0 10px');
    }

    function actions(options) {
        $(options.combobox).on('click', function(event) {
            var value = $('#dropdown-list').css('display');
            if (value == 'block') {
                $(options.combobox).css('border-radius','5px 5px 5px 5px');
                $('#dropdown-list').slideUp('fast');
            } else {
                $(options.combobox).css('border-radius','5px 5px 0 0');
                $('#dropdown-list').slideDown('fast');
            }
            event.stopPropagation(); //关键在于阻止冒泡
        });
        $('#dropdown-list').on('mouseover', 'li', function() {
            $(this).css('background-color', '#00C1DE');
        });
        $('#dropdown-list').on('mouseout', 'li', function() {
            $(this).css('background-color', '#42485b');
        });
        $('#dropdown-list').on('click', 'li', function() {
            var value = $(this).html();
            $(options.combobox).html(value);
            $('#dropdown-list').slideUp('fast');
        });
        $(document).on('click',function(){
          $(options.combobox).css('border-radius','5px 5px 5px 5px');
          $('#dropdown-list').slideUp('fast');
        });
    }
    var Combobox = function(e, options) {
        this.element = e,
            this.defaults = {
                width: 100,
                height: 30,
                combobox: '#combobox',
                id: 'combobox'
            },
            this.options = $.extend({}, this.defaults.options);
    };
    Combobox.prototype = {

    };
    $.fn.myCombobox = function(target, parm) {
        var combobox = new Combobox(this, target);
        var options = {};
        if (typeof target == 'string' && typeof parm == 'string') {
            return combobox[target](parm);
        }
        if (typeof target == 'string' && typeof parm == 'object') {
            options = $.extend({}, combobox.defaluts, parm);
            return combobox[target](options);
        }
        var state = $.data(this, 'combobox');
        if (state) {
            options = $.extend({}, state.options, target);
        } else {
            options = $.extend({}, combobox.defaluts, target);
        }
        $.data(this, 'combobox', {
            options: options
        });
        this.each(function() {
            _init(combobox, true);
        });
    };
})(jQuery, window, document);

$(function() {
    var list = ['北京', '上海', '深圳', '广州', '厦门', '杭州', '成都', '重庆'];
    $('#combobox').myCombobox({
        list: list,
        width: 100,
        height: 30,
        combobox: '#combobox',
        id: 'combobox'
    }); //加载启动
});