自写Jquery插件 Combobox

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

上效果

html

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

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

css

@CHARSET "UTF-8";
body, html {
    height: 100%;
}

ul, li {
    list-style: none;
}

.combobox {
    -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;
}

.combobox+i, #dropdown-list {
    position: absolute;
}

.combobox, #dropdown-list {
    border: 1px solid #AAAAAA;
}

.combobox, #dropdown-list>li {
    text-align: left;
    padding: 0 10px;
}

.combobox, .combobox+i, #dropdown-list>li {
    cursor: pointer;
    font-size: 13px;
}

#dropdown-list {
    display: none;
}

#dropdown-list>li {
    color: #ffffff;
    background-color: #42485b;
    display: block;
}

jquery.combobox.js

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

    function warpList(options, r, t) {
        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>';
        $(options.combobox).next().after(buffer);
        $(options.combobox).next().next().css('left', r['y'] + 2).css('top', r['x'] + t.height - 1);
        $(options.combobox).next().next().children('li').css('width', options.width + 1).css('height', options.height).css('line-height', options.height + 'px');
    }

    function actions(options) {
        $(options.combobox).on('click', function(event) {
            var value = $(options.combobox).next().next().css('display');
            if (value == 'block') {
                $(options.combobox).css('border-radius', '5px 5px 5px 5px');
                $(options.combobox).next().next().slideUp('fast');
            } else {
                $(options.combobox).css('border-radius', '5px 5px 0 0');
                $(options.combobox).next().next().slideDown('fast');
            }
            event.stopPropagation(); //关键在于阻止冒泡
        });
        $(options.combobox).next().on('click', function(event) {
            var value = $(options.combobox).next().next().css('display');
            if (value == 'block') {
                $(options.combobox).css('border-radius', '5px 5px 5px 5px');
                $(options.combobox).next().next().slideUp('fast');
            } else {
                $(options.combobox).css('border-radius', '5px 5px 0 0');
                $(options.combobox).next().next().slideDown('fast');
            }
            event.stopPropagation(); //关键在于阻止冒泡
        });
        $(options.combobox).next().next().on('mouseover', 'li', function() {
            $(this).css('background-color', '#00C1DE');
        });
        $(options.combobox).next().next().on('mouseout', 'li', function() {
            $(this).css('background-color', '#42485b');
        });
        $(options.combobox).next().next().on('click', 'li', function() {
            var value = $(this).html();
            $(options.combobox).html(value);
            $(options.combobox).next().next().slideUp('fast');
        });
        $(document).on('click', function() {
            $(options.combobox).css('border-radius', '5px 5px 5px 5px');
            $(options.combobox).next().next().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, target.id);
        if (state) {
            options = $.extend({}, state.options, target);
        } else {
            options = $.extend({}, combobox.defaluts, target);
        }
        $.data(this, target.id, {
            options: options
        });
        this.each(function() {
            _init(combobox, true, options);
        });
    };
})(jQuery, window, document);

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

});