Question

I have a form element being loaded with an ajax call on change of the previous select. The Ajax call works fine, and I finally got it not to break the styling. I just can get it to grow larger than just 1 options.

My JS:

    jQuery(document).ready(function(){
     jQuery("#ajaxLoader").hide();
     jQuery("#field1").change(function(){            
        var optionValue = jQuery("#field1").val();      
        jQuery.ajax({
            type: "POST",
            url: "<?=$myURL?>",
            data: ({key: optionValue, status: 1}),
            beforeSend: function(){ jQuery("#ajaxLoader").show(); },
            complete: function(){ jQuery("#ajaxLoader").hide(); },
            success: function(response){
                jQuery("#field2").html(response);
                jQuery("#field2").show();
            }
        });
    });
});

I’ve also uploaded a screenshot http://coolyar.net/?di=513133334819

EDIT:
My Global.js Select Function

   $('select').each(function(){
        var select = this;

        //I think this is the issue here. I don't know how to override the size
          attribute.

        $(this).attr('size',$(this).find('option').length+1).wrap('<span class="ui-select" />')
            .before('<span class="ui-select-value" />')
            .bind('change, click', function(){
                $(this).hide().prev().html($(this).find('option:selected').text());
            })
            .after('<a class="ui-select-button button button-gray"><span></span></a>')
            .next().click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            })
            .prev().prev().html($(this).find('option:selected').text())
            .click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            });
        $(this).blur(function(){ $(this).hide(); }).parent().disableSelection();
    });

Answer 1

   $('select').each(function(){
        var select = this;
        var selectSize = $(this).attr('size');
        if ($(this).attr('size') == 0){
            var selectSize = $(this).find('option').length+1;
            console.log(selectSize); 
        }

        $(this).attr('size', selectSize).wrap('<span class="ui-select" />')
            .before('<span class="ui-select-value" />')
            .bind('change, click', function(){
                $(this).hide().prev().html($(this).find('option:selected').text());
            })
            .after('<a class="ui-select-button button button-gray"><span></span></a>')
            .next().click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            })
            .prev().prev().html($(this).find('option:selected').text())
            .click(function(){
                if ($(select).toggle().is(':visible')) {
                    $(select).focus();
                }
                return false;
            });
        $(this).blur(function(){ $(this).hide(); }).parent().disableSelection();
    });