ajaxSelect

HTML

<link rel="stylesheet" href="https://raw.github.com/fnagel/jquery-ui/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="https://github.com/fnagel/jquery-ui/raw/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<select id='me'>
    <option value="-1">Loading...</option>
</select>
<select id='mein'>
    <option value="-1">Loading...</option>
</select>

CSS

/* Selectmenu
----------------------------------*/
 .ui-selectmenu {
    display: block;
    display: inline-block;
    position: relative;
    height: 2.2em;
    vertical-align: middle;
    text-decoration: none;
    overflow: hidden;
    zoom: 1;
}
.ui-selectmenu-icon {
    position:absolute;
    right:6px;
    margin-top:-8px;
    top: 50%;
}
.ui-selectmenu-menu {
    padding:0;
    margin:0;
    position:absolute;
    top: 0;
    display: none;
    z-index: 1005;
}
/* z-index: 1005 to make selectmenu work with dialog */
 .ui-selectmenu-menu ul {
    padding:0;
    margin:0;
    list-style:none;
    position: relative;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-selectmenu-open {
    display: block;
}
.ui-selectmenu-menu-popup {
    margin-top: -1px;
}
.ui-selectmenu-menu-dropdown {
}
.ui-selectmenu-menu li {
    padding:0;
    margin:0;
    display: block;
    border-top: 1px dotted transparent;
    border-bottom: 1px dotted transparent;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
    font-weight: normal !important;
}
.ui-selectmenu-menu li a, .ui-selectmenu-status {
    line-height: 1.4em;
    display: block;
    padding: .405em 2.1em .405em 1em;
    outline:none;
    text-decoration:none;
}
.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled {
    cursor: default;
}
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a, .ui-selectmenu-hasIcon .ui-selectmenu-status {
    padding-left: 20px;
    position: relative;
    margin-left: 5px;
}
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon {
    position: absolute;
    top: 1em;
    margin-top: -8px;
    left: 0;
}
.ui-selectmenu-status {
    line-height: 1.4em;
}
.ui-selectmenu-open li.ui-selectmenu-item-focus a {
}
.ui-selectmenu-open li.ui-selectmenu-item-selected {
}
.ui-selectmenu-menu li span, .ui-selectmenu-status span {
    display:block;
    margin-bottom: .2em;
}
.ui-selectmenu-menu li .ui-selectmenu-item-header {
   ...

JavaScript

(function ($) {
    $.fn.ajaxSelect = function (options) {
        var $this = this;
        //options
        var settings = $.extend({}, defaults, options);
        //disable select
        if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) {
            $this.selectmenu('disable');
        }
        //ajax call
        this.promise = $.ajax({
            type: settings.type,
            contentType: settings.contentType,
            url: settings.url,
            dataType: settings.dataType,
            data: settings.data
        }).then(function (data) {
            var n = data.d || data;
            var list = "";

            for (var index = 0; index < n.length; index++) {
                list += '<option value=' + n[index].Id + '>' + n[index].Name + '</option>';
            }

            $this.filter("select").each(function () {
                $(this).html(list);
                if ($.ui.selectmenu && settings.selectmenu) {
                    $this.selectmenu();
                }
            });
            settings.success.call(this);
            return data;
        }, settings.error);

        return this;
    };

    var defaults = {
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: '/echo/json/',
        dataType: 'json',
        data: null,
        async: true,
        selectmenu: true,
        disableOnLoad: true,
        success: function () {},
        error: function () {}
    };
})(jQuery);


$(function () {
    var data = {
        json: $.toJSON({
            d: [{
                "Id": 1,
                    "Name": "One"
            }, {
                "Id": 2,
                    "Name": "Two"
            }]
        }),
        delay: 4
    };

    function ok() {
        console.log('nice');
    }

    function error() {
        alert('there was a problem :(');
    }
    var ajaxSelect = $('select').selectmenu().ajaxSelect({
        data: data,
        success: ok,
       ...