jquery.dummyemailbox.js

(function($) {
    jQuery.fn.dummyEmailBox = function() {
        var domains = [
            'gmail.com',
            'hotmail.com', 
            'hotmail.es', 
            'live.com',
            'live.es',
            'yahoo.com',
            'yahoo.es',
            '-- Otro --'
        ];

        var name = this.attr('name');

        var html = '<div id="dummy_email" class="dummy_email">\
                    <input id="dummy_email_value" type="hidden" name="' + name + '"/>\
                    <input type="text" id="dummy_email_username"/>\
                    <span>@</span>\
                    <select id="dummy_email_domain">';

        for (var i = 0; i < domains.length; i++) 
            html += '<option>' + domains[i] + '</option>';        

        html += '</select></div>';

        // Add the new elements of the widget.
        $(html).insertBefore(this);

        // Removes the input 
        this.remove();

        // When the last option is selected, an input is created so you can write your own domain, and the select is removed.
        $('#dummy_email_domain').change(function() {
            if (this.value === '-- Otro --') {
                var html = '<input type="textbox" id="dummy_email_domain">';
                $(html).insertAfter(this);
                $('#dummy_email_domain').remove();
            }                
        });

        $('#dummy_email_username, #dummy_email_domain').live('change', function() {
            if ($('#dummy_email_username').val() !== '')
                $('#dummy_email_value').val($('#dummy_email_username').val() + '@' + $('#dummy_email_domain').val());
            else
                $('#dummy_email_value').val('');
        });
    }
})(jQuery);